What are broken Images? Print

  • 0

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




This means the web page code refers to an image location that is incorrect, or out of date. You have a missing image, 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 file path 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.

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 have uploaded and published an image to your site and the location of the file is http://www.mydomain.com/myLogo.png

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: http://www.mydomain.com/images/myLogo.png

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. So 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 third party apps. 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 shouldn't. (such as above image)

How to troubleshoot and repair broken images?
Troubleshoot broken images with the following steps;

1 - Right-click the broken image placeholder to �Copy image URL� What this will do is give you the file location as it is interpreted by your site�s code. (Firefox: "Copy image location" Chrome: "Copy image URL")

2 - Paste (CTRL+V) the location into a word program or text editor like Notepad, Microsoft Office Word or such.

3 - The last part of the location (ex. myLogo.png) 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.

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.

5 - Since the image files are still in your File Manager, they can still be re-inserted when adding to a webpage, When in doubt, simply re-upload the image to your page from your hard drive or website URL.

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.

Updated: 03 November 2012


Was this answer helpful?

« Back

Powered by WHMCompleteSolution