html - 我看不到 .png 文件作为图像，但作为背景图像它可以工作

Question

我正在制作一个登陆页面，我想在那里放一些 png 图像 链接，但它们没有显示。当我将 png 设置为背景图像时，我在页面上看到了它，但很随意 <img>不工作。文件路径没问题，我敢肯定，但控制台显示 "404 file not found" .当我使用与 bg 图像完全相同的路径时，它完美地工作我不知道为什么......我在 SCSS 中编写样式并在网站的不同部分使用组件(如果重要的话)。请帮助我是新来的 T.T

这是链接

<div id='media'>
    <a target='_blank' href="https://en.wikipedia.org/wiki/Facebook">
        <img src="/src/images/facebook.png" alt="ikona facebooka">
    </a>
    <a target="_blank" href="https://pl.wikipedia.org/wiki/LinkedIn">
        <img src="/src/images/linkedin.png" alt="ikona linkedin">
    </a>
</div>

我的文件夹结构如下所示:

./src:
 ../fonts
 ../images<--here are the png files
 ../js
 ../sass
 ../templates:
   .../components
   ...index.html
./web:
 ../css
 ../images
 ..index.html

Answer 1

您的 styles.css 文件位于与模板文件不同的位置，因此路径应该不同。

从您的样式表位置web/css/style.css -> ../../src/images/filename.png

从您的模板位置src/templates/index.html -> ../../web/images/filename.png

以下是解决文件路径问题的方法:

• 打开开发工具 => 网络选项卡(根据您的情况选择 images)
• 查找有问题的文件
• 如果是 404ing，您的路径可能有问题。
• 尝试在新的浏览器选项卡中使用您认为应该的完整 URL 路径加载您的图像。 (确保其正常转换)
• 然后根据代码中的 URL 检查完整/服务文件 URL

这是 WordPress 网站吗？如果是这样，请确保输出完整路径

<?php bloginfo('template_directory'); ?>/path/filename.jpg