how to use image in visual code it's not working?

html css image url

10,269

Solution 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.

Solution 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.

10,269

Author by

Tahir Shahzad

i am Tahir Shahzad i have done Bachelors in computer Science.i have a lot of knowledge of PF and OOP also i have done html, html5, css, css3, bootstrap4 and angular 9 that is in process. i want a job releted to these web development language i can perform front end designing using all above mentioned languages of website develpment.

Updated on June 05, 2022

Comments

Tahir Shahzad almost 2 years

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>