. Advertisement .
..3..
. Advertisement .
..4..
If you are wondering, “Why is my image not showing up in HTML?”, this tutorial will help you understand this problem, including common mistakes you may make while writing a web page.
Why Is My Image Not Showing Up In HTML?
Suppose you you this simple HTML code:
<!DOCTYPE html>
<title>
Why Is My Image Not Showing Up In HTML
</title>
<body>
<h2>Example: Images In HTML</h2>
<img src="example-picture.png">
</body>
</html>If things work perfectly, we can expect the page to be rendered like this, with the image showing up below the <h2> element.
......... ADVERTISEMENT .........
..8..
But you may see the image-not-found icon (which looks like a ripped picture) in browsers instead.
......... ADVERTISEMENT .........
..8..
There are plenty of reasons why this happens to your HTML page.
Missing Image File
Sometimes, it is simply because the file you set in the <img> element doesn’t exist, and therefore, the browser can’t fetch and display it.
Open the folder that is supposed to contain the image and check if the file is there. It may sound silly, but this is a common mistake.
Perhaps you have forgotten to upload the image, or it has been somehow deleted without your knowledge. Copy the image to the folder set in <img>, and your HTML page should work fine now.
If you transfer the image to the server using protocols like FTP or SSH, make sure that the process finishes successfully. Don’t just run the command and ignore the program’s messages.
Wrong File Name
When you are sure that the image file has been successfully uploaded or copied to its folder, it is time to check its file name. This includes both the primary name and the extension. Ensure they both match what you have defined in the <img> element.
For instance, if you have this snippet in your HTML <body>:
<img src="example-pictu.jpeg">But if it turns out the images folder only contains a file named example-picture.jpg or example-picture.png, the image will not show up in your browser.
Examine the file name and confirm that you have spelled it correctly. Remember that most web servers and platforms for them are case-sensitive. It means example-picture.png, Example-picture.png, or example-Picture.PNG are different, and the server will not treat them as a single file name.
The best practice is to always save your file names in lowercase letters. This way, you can eliminate one possible issue when it comes to file names in HTML.
Wrong File Path
When fed with an incorrect file path, browsers won’t display the image even when it exists in the folder, and you get the name correctly too.
The concept of file systems, including paths, can be hard to get a firm understanding of at first. But basically, you have absolute and relative file paths.
Most of the time, you should use the relative path for your HTML resources. It refers to the folder in relation to the HTML file’s location.
But sometimes, we must fetch the image from external resources, such as from a hosting server. An absolute path is required in this case, such as:
<img src"https://ittutoria.net/wp-content/themes/discy/images/action.png">Regardless of the type, make sure that you have set the relative or absolute path correctly in the <img> element.
Conclusion
Why is my image not showing up in HTML? It doesn’t necessarily mean you have written the wrong code. Perhaps it is as simple as an image file that has been incorrectly named. In most cases, just check the file path and name, and you will solve the issue.
Leave a comment