What Are Broken Images?

Discuss.png

How to Manage Broken Images

Have you ever seen an image that looks like this on your website?

oops_image_not_found.jpg

This means the web page code refers to an image location that is incorrect, or out of date. You have a missing image! Here's another example:

x_image_not_found.jpg

If you've recently updated your Primary Site Address or domain, or your custom domain has expired, this may have caused your image files to refer to a filepath that is no longer valid, since the older site address is the root address of those files.

Any site changes relating to the address or domain of your website may require you to update any of the file locations to reflect the new site address.

Broken images are also commonly caused by making changes to a file name or location after the file has been published.

How to avoid broken images

Once an image is published on your website, there is an address associated with it. This address is part of the code that renders your website online. Make sure the location of your file is the same location for the image in your page’s code. Example:

You’ve uploaded and published an image to your site. The location of the file is

url_1.jpg .
This location is part of your page’s code.

If you decide to move all of your images to an “image” directory, this will change the location of the file to url_2.jpg 

If your web page code has not been updated with the new file location, you will see a broken image placeholder or an “image not found” message.

Make sure that when changing file names or locations that you are also updating them on the published website.

This can also affect images that are stored in application directories like Webstore and Photo Gallery. If you move, delete, or re-name the files that appear in these folders, they will not show up online and result in something that looks like this:

missing_gallery_image.jpg

NOTE: Images used for your Photo Gallery and Webstore applications can be found in your “photos” and “webstore” directories in your File Manager, respectively.

How to troubleshoot and repair broken images

Troubleshoot broken images with the following steps:

1. Right-click the broken image placeholder to “copy image location.” What this will do is give you the file location as it is interpreted by your site’s code.

copy_image_location.jpg

2. Paste (CTRL + V) the location into a word program or text editor like Notepad.

3. The last part of the location (ex. "puppy.jpg") is the file name. Search for this file name in your File Manager. Check the “Show File Paths” box to ensure that the results display any directories the file is a part of.

file_search.jpg

4. Click the file to open it in your browser. If the address in the browser is different from the address you retrieved in step #1, you have a broken image link.

NOTE: These steps will work if the file has been moved to a different directory or your Primary Site Address has changed. It will not work if the name of the file has been changed.

5. Since the image files are still in your File Manager, they can still be re-inserted when selecting the "My Images" option when placing an image on a normal page in SiteBuilder. When in doubt, simply re-upload the image to your page from your hard drive.

If you have an image-heavy site, try to avoid moving your images to different folders in bulk, since correcting each one can be time-consuming. Avoid making name or location changes to a file that is already published.

For more on working with images and uploading files, check out these helpful articles elsewhere in the Webs Knowledge Base:

 

Have questions or comments about broken images? Discuss it in our Support Community:

Have more questions? Submit a request

0 Comments

Article is closed for comments.