-1

Im new to HTML & CSS and I can't figure out why my image doesn't show up. This is my code.

.test {
  width: 100%;
  height: 100%
}
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <div class=test>
          <img src="file:///Users/myname/Desktop/picture%201.jpg" alt="">
      </div>
  </body>
  </html>
HappyGilmore
  • 41
  • 1
  • 6
  • Most likely your path is wrong. Are you open the HTML page on your local machine, or trying to open it on a server? – j08691 Dec 21 '21 at 18:54
  • Very probably the problem will be the path in src attribute. Try to use so-called "relative path", which is linking from the location of the html file... The easiest way would be to put the image into same folder where is located your html file and just use src="picture%201.jpg". – Tomas Korinek Dec 21 '21 at 18:55
  • 1
    Use relative paths and don't have spaces in the file name. This is not necessarily the issue here, but still a good rule – mplungjan Dec 21 '21 at 19:09

2 Answers2

2

Your mistake is here src="file:///Users/myname/Desktop/picture%201.jpg" you are missing drive name before Users such as C: or D: file:///C:/Users/myname/Desktop/picture%201.jpg

Your src="" suppose to look like src="YourProject/imagefolder/picture.jpg"

I used a random online available picture. src="https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578"

.test {
  width: 100%;
  height: 100%
}
<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <div class="test">
          <!-- <img src="file:///Users/myname/Desktop/picture%201.jpg" alt=""> -->
          <img src="https://media.istockphoto.com/photos/human-crowd-forming-a-chain-symbol-bonding-and-social-media-concept-picture-id936347578" alt="">
      </div>
  </body>
  </html>
TheHunter Shergill
  • 792
  • 5
  • 24
-1

The problem is with your image path mentioned in the src. you have to mention the correct image path otherwise the image won't display in your page.

.test {
  width: 100%;
  height: 100%
}
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <div class=test>
          <img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
      </div>
  </body>
  </html>
srinithi R
  • 206
  • 1
  • 5