Benjamin Lu

everyday is cool

Why Images Break After Upload

Suppose a homepage and its photo work when you open them on your own computer. After uploading the site, the page loads but the image is gone. Start by checking what address the HTML tells the browser to request.

site/
  index.html
  photos/
    garden.jpg

With this folder layout, the homepage can use:

<img src="photos/garden.jpg" alt="Flowers along the garden path">

Open the page source and compare that path with the remote file listing. Check the folder name, the extension, and the exact capitalization. Some local filesystems accept Garden.JPG when you ask for garden.jpg, while a case-sensitive server treats them as different names. Also look for a path beginning with a drive letter or file:. That points to a location on the original computer.

Try opening the image’s expected address directly. If it returns a missing-file error, fix the path or upload the missing file, then reload the page.