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

 <!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?

CodePudding user response：

According to you, the image file is in the same folder as your HTML file. This means that you are probably linking the image incorrectly. Since the image is in the same folder, you should link it by either:

<img  src="./download.jpg" alt="images one"> <!-- Notice the . before the filename -->

OR:

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

Either one should work for you.

CodePudding user response：

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>