How To Fix A Broken Image Icon?

What is a broken image icon?

How to fix a broken image icon?

Missing image on the web server

If you are a website owner, check that the image is present on the web server. Put the image in the right place on the web server so the image can be loaded again by your website.

You need to double-check the configuration of your server if the image is not available. Make sure the web server serves the images from the right directory. You can read about the Nginx web server config to fix 404 Not Found errors.

Invalid image reference in HTML or CSS

If the image is served by your web server, it is likely a problem in your HTML or CSS. Find the location where the image is loaded in your HTML:

<img src="/people-having-lunch.jpg" alt="People having lunch at our restaurant" />

Make sure you reference the image the right way. This image will be loaded from https://your-website.com/people-having-lunch.jpg . Use absolute or relative URLs the right way:

Reference by using a relative url:

<!-- Hosted on: https://example.com -->

<!-- Example 1: current page: https://example.com/my-restaurant -->
...
<img src="/people-having-lunch.jpg" alt="People having lunch at our restaurant" />
...
<!-- Image will be loaded from: https://example.com/people-having-lunch.jpg -->

<!-- Example 2: current page: https://example.com/my-restaurant -->
...
<img src="people-having-lunch.jpg" alt="People having lunch at our restaurant" />
...
<!-- Image will be loaded from: https://example.com/my-restaurant/people-having-lunch.jpg -->

Or by using an absolute url:

<!-- Hosted on: https://example.com -->
<!-- Example 3: current page: https://example.com/my-restaurant -->
...
<img src="https://example.com/people-having-lunch.jpg" alt="People having lunch at our restaurant" />
...
<!-- Image will be loaded from: https://example.com/people-having-lunch.jpg -->

<!-- Example 4: current page: https://example.com/my-restaurant -->
...
<img src="../people-having-lunch.jpg" alt="People having lunch at our restaurant" />
...
<!-- Image will be loaded from: https://example.com/people-having-lunch.jpg -->

Or by using a relative url with a base href:

<!-- Hosted on: https://example.com -->
<!-- Example 5: current page: https://example.com/my-restaurant -->
...
<base href="https://example.com/" />
<img src="people-having-lunch.jpg" alt="People having lunch at our restaurant" />
...
<!-- Image will be loaded from: https://example.com/people-having-lunch.jpg -->

And of course (but easy enough to miss): make sure you use the right file extension for your image in your HTML and CSS.

Spaces and other special characters in image file names

Watch out for spaces and other non-standard characters in your image names. Use dashes instead of spaces. Browsers url-encode spaces and other characters in URLs. Your web server might not be able to look up the image which results in a broken image icon on your website.

Broken image due to Cache policy

Browsers can cache images, even if they are broken. Remove the cache for the specific website by doing a hard refresh:

• Chrome: Ctrl + F5 (Windows) or CMD + Shift + R (Mac OS)
• Firefox: Ctrl + F5 (Windows) or CMD + Shift + R (Mac OS)
• Edge: Ctrl + F5 (Windows)
• Safari: Option + Cmd + E (Mac OS)

The easiest way to fix a broken image icon that is caused by a cache policy as a website owner is to rename the image. Replace all references in HTML and CSS with the new image name. All clients will now load the new image because it wasn't cached yet by the browsers.

Server-side broken image caching

Web servers and reverse-proxies like Nginx can cache 404 Not Found errors in order to send a response faster. If the file is put in place, after the 404 response was cached, you need to clear your cache. How you clear server-side cache depends on the web server you are using. You can try to restart the server which clears in-memory caches.