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）
寻找相关文件
如果是404，则您的路径可能不正确。
尝试使用您认为应该的完整URL路径在新的浏览器标签中加载图像。（确保其正常运行）
然后根据您代码中的URL检查完整/提供服务的URL

这是一个WordPress网站吗？如果是这样，请确保使用以下命令输出完整路径

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

Answer 2

从图像路径的开头删除“ /”。所以改变这个：

<img src="/src/images/facebook.png" alt="ikona facebooka">

对此：

<img src="src/images/facebook.png" alt="ikona facebooka">

我看不到.png文件为图片，但可以作为背景图片使用

2 个答案: