Html img src 标签不显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26180657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
img src tag not displaying image
提问by nextstep
I'm trying to display social media icons at the footer of a webpage using the img src tag (should be simple). The image isn't showing up and I can't find the problem.
我正在尝试使用 img src 标签（应该很简单）在网页的页脚处显示社交媒体图标。图像不显示，我找不到问题。
html
html
<div class="mastfoot">
<div class="inner">
<p><a href="#"><img src="/images/twitter.png"></a></p>
</div>
</div>
css
css
.mastfoot {
position: fixed;
bottom: 0;
}
I'm probably overlooking something simple but thanks in advance!
我可能忽略了一些简单的事情，但提前致谢！
Here's what I'm getting when I inspect image file in browser.
这是我在浏览器中检查图像文件时得到的结果。
Here's code for CSS inner class
这是 CSS 内部类的代码
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.inner {
padding: 30px;
}
.site-wrapper-inner {
vertical-align: middle;
}
回答by Eric Holmes
Open up your Console (Right Click + Inspect Element in most browsers) to see if your URL for the image is broken.
打开您的控制台（在大多数浏览器中右键单击 + 检查元素）以查看您的图像 URL 是否已损坏。
You can also click on the URL that it's generating. Chances are the /at the start of the path is not what you want. That goes to your root path, not the current directory. Try using images/twitter.pnginstead.
您还可以单击它生成的 URL。很可能/在路径的起点不是你想要的。这将转到您的根路径，而不是当前目录。尝试使用images/twitter.png。
The path you are looking for is probably something like this:
您正在寻找的路径可能是这样的：
http://localhost/myproject/images/twitter.png
But because of the initial /, this is the URL that your browser would look for:
但是由于初始/，这是您的浏览器将查找的 URL：
http://localhost/images/twitter.png
回答by nextstep
Fixed problem, I redirected the path to my assets folder which is where the images folder is,
修复了问题，我将路径重定向到我的资产文件夹，这是图像文件夹所在的位置，
<img src="assets/twitter.png">
And it worked. Don't really know why though!
它奏效了。虽然真的不知道为什么！
回答by Intros Pector
A good way is to check what URL the browser is seeing, by looking at the source code of the page having the broken image link. For example, in Firefox via Tools-->Web Developer-->Page Source, in Google Chrome via -->More tools --> Developer Tools --> Elements. That helped me see what URL the browser was seeing for the image, then I moved the image and changed the URL to make it work.
一个好方法是通过查看具有损坏图像链接的页面的源代码来检查浏览器看到的 URL。例如，在 Firefox 中通过工具-->Web 开发者-->页面源，在谷歌浏览器中通过-->更多工具--> 开发者工具--> 元素。这帮助我查看浏览器看到的图像 URL，然后我移动图像并更改 URL 以使其工作。
