图片不显示[关闭]答案

【问题标题】：Image doesn't show up [closed]图片不显示[关闭]
【发布时间】：2022-01-23 03:51:06
【问题描述】：

我是 HTML 和 CSS 的新手，我不知道为什么我的图片不显示。这是我的代码。

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

【问题讨论】：

您的路径很可能是错误的。您是在本地计算机上打开 HTML 页面，还是尝试在服务器上打开它？
很可能问题出在 src 属性中的路径。尝试使用所谓的“相对路径”，它是从 html 文件的位置链接...最简单的方法是将图像放入 html 文件所在的同一文件夹中，然后使用 src="picture% 201.jpg”。
使用相对路径，文件名中不要有空格。这不一定是这里的问题，但仍然是一个很好的规则

标签： html css image

【解决方案1】：

你的错误在这里src="file:///Users/myname/Desktop/picture%201.jpg"你在Users之前缺少drive name例如C:或D:file:///C:/Users/myname/Desktop/picture%201.jpg

你的src="" 看起来像src="YourProject/imagefolder/picture.jpg"

我使用了一张随机的在线可用图片。 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>

【讨论】：

class=test 有效。 stackoverflow.com/questions/13056683/…

【解决方案2】：

问题在于 src 中提到的图像路径。您必须提及正确的图片路径，否则图片将不会显示在您的页面中。

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

【讨论】：

这个答案添加了哪些现有答案尚未涵盖的内容？