How to fix image not showing in an HTML page

There are two things you can do to fix an HTML image not showing up on the browser:

This tutorial will explain the above methods, starting with checking the src path

Check the src path to fix image not showing

Every image in HTML is rendered by using the <img> tag with the image source specified in the src attribute.

You can put a relative path or an absolute path to the src attribute depending on where you place the image.

If your image is saved locally in a folder beside your HTML document location, then you can use the relative path.

Suppose you have the following folder structure in your project:

html-project
├── image.jpeg
└── index.html

Then inside the index.html file, you can display the image using the following tag:

<img src="image.jpeg" />

When your image is one folder down as in the following structure:

html-project
├── assets
│   └── image.jpeg
└── index.html

Then you need to add the folder assets to the src attribute as follows:

<img src="assets/image.jpeg" />

The relative path can also go up a folder by using the ../ pattern, so if you have the following structure:

html-project
├── assets
│   └── image.jpeg
└── pages
    └── index.html

The index.html file can reach the image using the following src attribute:

<img src="../assets/image.jpeg" />

When you have the correct path, don’t forget to check the image extension and make sure it’s the same between the src and the actual image.

Sometimes an image with .png extension is written to the src attribute as .jpg extension.

Once the image src path is correct, then you need to check if the image is accessible by your server.

Keep in mind that if you use a local development server like XAMPP, WAMP, or MAMP, then the image must be located inside the development folder.

For WAMP, the image must be inside the www/ folder, while for XAMPP and MAMP you need to place the image inside the htdocs/ folder.

Finally, if you’re using an absolute path, make sure that you’re not placing your local hard disk path to the src attribute.

The following example will not work when you put the website online:

<img src="file:///Users/nsebhastian/html-project/assets/image.jpeg" />

Once you’ve verified that the image is accessible in development, the image may still disappear from your production site because of the cache.

Let’s see how to clear the cache next.

One reason for images not showing up on a website is because the browser or the server cache still serving the old HTML page to the visitors.

This only happens when you revise an already published HTML file to include a new image on the page.

Clearing browser cache may be different depending on the browser that you’re using.

If you’re using Chrome, then you can clear the cache by opening the developer tools menu and then right-click on the reload icon.

There, you can click on the Empty Cache and Hard Reload option:

The browser should refresh the page and pull the new page from your server.