3

enter image description here Image is not showing in browser using the image tag where am i wrong? i want to add image in web and i am unable to do it using in visual code i don't know where from image to be added in the URL of image so anyone guide.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sign up </title>
</head>
<body>
  <div class="Header">
      <a href="/" class="LogoWrapper" >
      <img src="D:\my-angular-projects\signup-form\src\image\Snap.jpg" alt="Scone O'Clock logo" />
      </a>
      <p class="Strap">Scones: the most resplendent of snacks </p>
   </div>

        <div class="IntroWrapper">
            <p class="IntroText">
              Occasionally maligned and misunderstood; the scone is a quintessentially British classic.
            </p>
         <div class="MoneyShot">
              <img class="MoneyShotImg" src="D:\my-angular-projects\signup-form\src\image\1555932407.jpg" alt="Incredible scones" />
              <p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
         </div>
       </div>
     <p>Recipe and serving suggestions follow.</p>
   <div class="Ingredients">
      <h3 class="SubHeader">
      Ingredients</h3>
      <ul>
     </ul>
    </div>
   <div class="HowToMake">
    <h3 class="SubHeader">Method</h3>
    <ol class="MethodWrapper">
    </ol>
   </div>
</body>

   

 </html>
rioV8
  • 24,506
  • 3
  • 32
  • 49
Tahir Shahzad
  • 53
  • 1
  • 1
  • 8

2 Answers2

2

the problem is that your file retrieves the image based on where the html file is somewhere and it does not check the entire computer hard drive.

So if you want the problem fixed you can start from the html files location basically. So if your html file is in the src folder your img tag shall be

<img src="image/1555932407.jpg">

else if you have your html file in the signup-form folder i shall work with this

<img src="src/image/1555932407.jpg">

Hopefully you found this useful otherwise just comment this post.

TimFredriksson
  • 68
  • 7
1

Visual Studio Code automatically retrieves files from the root directory, so it lists all of the files for you - making it easier to implement images and other stuff. It's one of the main reasons I use VSCode.

The image location depends on where your HTML file is. Use forward slashes when specifying folders/files, and use ../ to go up a directory.

Nanoo
  • 836
  • 8
  • 16