img src 标签不显示图像答案

【问题标题】：img src tag not displaying imageimg src 标签不显示图像
【发布时间】：2014-10-03 14:15:47
【问题描述】：

我正在尝试使用 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;
}

【问题讨论】：

工作正常jsfiddle.net/opsh1os8
确保路径正确。尝试使用 images/twitter.png 而不是 /images/twitter.png。可以为内部类添加css源代码吗？
确保您的图片名称正确......并且没有像“#”这样的特殊字符
我注意到你没有关闭你的 IMG 标签...
并且编译器将其检测为文本/HTML

标签： html css image

【解决方案1】：

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

您还可以单击它生成的 URL。路径开头的 / 可能不是您想要的。这将转到您的根路径，而不是当前目录。尝试改用images/twitter.png。

你要找的路径大概是这样的：

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

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

http://localhost/images/twitter.png

【讨论】：

网址正确，图片由于某种原因没有显示

【解决方案2】：

修复了问题，我将路径重定向到了图片文件夹所在的 assets 文件夹，

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

它奏效了。不过真的不知道为什么！

【讨论】：

小心，您可能指向了错误的文件夹或错误的图像。您可能有 2 张相同的推特图片。如果这是一个即将上线的项目，那么当您将其放入主机时，它可能会中断。
@nextstep 我在 Chrome Canary 64 中遇到了与透明 Twitter 徽标完全相同的问题。你没疯……有各种各样的问题。该图像确实以 33kb 200 代码的形式出现，但为 0x0px。颜色版本加载得很好。

【解决方案3】：

一个好方法是检查浏览器看到的 URL，方法是查看包含损坏的图像链接的页面的源代码。例如，在 Firefox 中通过 Tools-->Web Developer-->Page Source，在 Google Chrome 中通过-->More tools--> Developer Tools--> Elements。这有助于我查看浏览器看到的图片 URL，然后我移动了图片并更改了 URL 以使其正常工作。

【讨论】：