时间戳

首页 > 解决方案 > 我的 html/css 项目中的所有图片都没有出现

html - 我的 html/css 项目中的所有图片都没有出现

问题描述

我目前正在开发我在 vscode 上的第一个单独的 html/css 项目，但我不知道为什么所有图像都没有出现，包括我的背景图像。我已经搜索了很多以找到解决方案，但我发现没有任何帮助。我真的不知道问题出在代码、文本编辑器还是图片本身。

body {
    margin-top: 0px;
    padding-top: 0px;
    background-image: url("avengers_bg.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#eternals_pic {
    float: left;
}

#hawkeye_pic {
    float: left;
}

#spiderman_pic {
    float: left;
}

#strange_pic {
    float: left;
}
<!-- Sample Source Code -->
<!DOCTYPE html>
<html>
  <body>
    <a href="https://phantom- 
             marca.unidadeditorial.es/927e619e34b67b9e7326c9266914e6f0/crop/68x0/1311x700/resize/1320/f/jpg/assets/multimedia/imagenes/2021/08/20/16294695683527.jpg">
      <img id="eternals_pic" src="eternals.png" width="400px" alt="The Eternals" title="The Eternals">
    </a>
    <a href="https://static2.cbrimages.com/wordpress/wp-content/uploads/2021/07/hawkeye-header-2.jpg">
      <img id="hawkeye_pic" src="hawkeye.jpeg" width="400px" alt="Hawkeye" title="Hawkeye">
    </a>
    <a href="https://wttspod.com/wp-content/uploads/2021/07/maxresdefault-8.jpg">
      <img id="spiderman_pic" src="spiderman_nwh.jpeg" width="400px" alt="Spiderman NWH" title="Spiderman NWH">
    </a>
    <a href="https://upload.wikimedia.org/wikipedia/commons/1/11/Doctor_Strange_2_%28cropped%29.jpg">
      <img id="strange_pic" src="strange2.jpeg" alt="Dr.Strange 2" title="Dr.Strange 2" >
    </a>
  </body>
</html>

标签： htmlcss

解决方案

必须在没有单位的情况下设置图像的大小属性。默认情况下它是像素，所以替换width="400px"为width="400".

理想情况下，您还应该设置height图像的属性。这将帮助浏览器在实际下载图像之前显示一个空矩形。

然后可以使用 CSS 规则覆盖图像大小，例如，如果您减小页面大小，这将使您的图像更小，但保持正确的图像比例：

img {
  max-width: 100%;
  height: auto;
}

此外，最好将图像放在一个文件夹中，例如CSS、JSimages和img图像文件旁边没有 HTML 文件。然后在src属性中，放置图像的相对路径，例如src="img/cloud.png".

使用浏览器调试器查看下载图像时是否出现错误。它也可能是错误的扩展名，例如以 PNG 或 JPG 重命名的位图 (BMP) 文件。我看到很多错误，例如浏览器没有显示图像但其他软件显示图像，即使没有注意到文件扩展名错误。

另一个检查：删除你的 CSS 规则，看看你的内容是否只显示没有设计的纯 HTML。如果仍然没有，那么您知道这不是由于渲染问题，而是由于您的 HTML 中的错误、丢失的文件、错误的路径、损坏的图像等。

最后一个想法：您是否通过 Web 服务器提供 HTML？我的意思是 Apache、NGINX 或任何 PHP 内置 HTTP 服务器。如果是，您可能有一些重写规则或其他东西来修改 URL 的处理方式。

推荐阅读