img src标签不显示图像

Question

我尝试使用img src标记在网页的页脚显示社交媒体图标（应该很简单）。图像没有显示出来，我无法找到问题。

HTML

<div class="mastfoot">
    <div class="inner">
        <p><a href="#"><img src="/images/twitter.png"></a></p>
    </div>
</div>

CSS

.mastfoot {
    position: fixed;
    bottom: 0;
}

我可能会忽略一些简单但事先感谢的事情！

这是我在浏览器中检查图像文件时所获得的内容。

这是CSS内部类的代码

.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}

.inner {
    padding: 30px;
}

.site-wrapper-inner {
    vertical-align: middle;
}

Answer 1

打开您的控制台（在大多数浏览器中右键单击+检查元素）以查看图像的URL是否已损坏。

您还可以点击其生成的网址。机会开头的/可能不是你想要的。这是您的根路径，而不是当前目录。请尝试使用images/twitter.png。

您正在寻找的路径可能是这样的：

http://localhost/myproject/images/twitter.png

但是由于最初的/，这是您的浏览器要查找的网址：

http://localhost/images/twitter.png

Answer 2

修复了问题，我将路径重定向到我的资源文件夹，这是images文件夹所在的位置，

<img src="assets/twitter.png">

它有效。真的不知道为什么！

Answer 3

一种好方法是通过查看具有损坏图像链接的页面的源代码来检查浏览器看到的URL。例如，在Firefox中通过工具 - ＆gt; Web Developer - ＆gt; Page Source，在Google Chrome中通过 - ＆gt;更多工具 - ＆gt;开发人员工具 - ＆gt;元素。这有助于我查看浏览器为图像看到的URL，然后我移动了图片并更改了URL以使其正常工作。