'Image not loading on browser. I am not using a server just html file and image file

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <link rel="stylesheet" href="./home.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>

<img class = "img" src="/download.jpg" alt="images one">

</body>
</html>

I have this html code on my home.html file and the image is not loading on my browser The image file is i the same folder as the html file. Am I doing something wrong?

htmlcssimage


Solution 1:[1]

it is all about your src path you can copy your image's exact path in vs code, right-click on that image you want to show on the web page, copy the relative path and paste in src. Note: sometimes you need to change the direction of \ to this / to resolve the error.

    <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <link rel="stylesheet" href="./home.css">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
    </head>
    <body>
    
    <img class = "img" src="https://scontent.fkhi2-2.fna.fbcdn.net/v/t1.6435-9/83584368_2640398402913663_8086181498509590528_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=09cbfe&_nc_eui2=AeEj17MLkoima4X0i7rhcW-bOla5rc4Wt-E6Vrmtzha34crlU8ECjYzWPJA5DPQsDhgCQQQazdpg-z8BjOee_Wl4&_nc_ohc=GNVusO-liCcAX_VSOXH&_nc_ht=scontent.fkhi2-2.fna&oh=00_AT9RyzFYP6B_NBbAxuWrvaUCF9KWs-y9NccHcnp3VJgV4A&oe=6231777F" alt="images one">
    
    </body>
    </html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 bitee

Related Questions