How to solve image not showing in html

You're working on a website or web application and an image just won't show up. It can be incredibly frustrating, especially if you don't know what the issue is. Don't worry, this is a common problem that can be solved with some simple troubleshooting steps.

How to solve image not showing in html.#

There could be several reasons why the image is not showing up on the webpage despite being loaded successfully.

1. Check the image file path : Ensure that the file path for the image is correct and the file exists in that location. If the image is stored in a subfolder, make sure to include the subfolder name in the file path.
   

   Folder
   ├── logo.png
   └── index.html
   

   <img src="logo.png" />

   ---

   Folder
   ├── images
   │   └── logo.png
   └── index.html
   

   <img src="images/logo.png" />

   ---

   Folder
   ├── images
   │   └── logo.png
   └── pages
       └── index.html
   

   <img src="../images/logo.png" />

2. Use an absolute file path : Instead of using a relative file path, use an absolute file path to ensure that the image can be located from any location. For example, instead of "images/logo.png", use something like "https://www.3schools.in/images/logo.png".
3. Use the background-image property : Instead of using the "background" property, use the "background-image" property to set the background image using css. This can sometimes resolve issues with the image not showing up.

In conclusion, if an image is not showing in HTML, there could be several reasons for this. Some common reasons include incorrect file path, incorrect file type, incorrect image dimensions, or a problem with the server.