There are two things you can do to fix an HTML image not showing up on the browser:
- Check the
srcpath to of the
- Check the cache of the website on the production host
This tutorial will explain the above methods, starting with checking the
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
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
index.html file can reach the image using the following
<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
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
Finally, if you’re using an absolute path, make sure that you’re not placing your local hard disk path to the
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.
Check the cache to fix image not showing
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.