本文详细探讨了在HTML中使用<img>标签加载图片时遇到的问题及解决方案。内容包括网络图片和本地文件的URL设置，重点讲解了如何正确引用本地图片的绝对路径和相对路径，确保图片在网页中正常显示。同时提到了<head>标签中添加meta属性对referrer策略的影响，但并非解决图片加载问题的关键。
html：w3school 在线教程
如题，本来想用<img>标签显示图片，但是始终无法加载出图片，显示结果如下：
<html><head></head><body>
<img src='w3school.jpg' width='104' height='142'/>
</body></html>
网上有些说是要在<head>标签中加入<meta name="referrer" content="never">,试了还是不行，后来发现是源属性src的值url的问题。
标签<img>中的值url：
a、如果图片来源于网络，url的值为图片的网络地址（右键图片后，点击 复制图片链接 就可得到图片网络地址），就可成功加载出图片。
b、如果图片来源于本地文件（C盘或者D盘等），url的值可为绝对地址或者相对地址，在这里我的html文档名为example.html，图片名为doghead.gif。
（1）url为绝对地址，不管example.html和doghead.gif的位置关系，直接在图片属性中查找图片的位置，我的是D:\yingyongwenjian\study\pythonwork\html_knowledge，加上文件名即可 D:\yingyongwenjian\study\pythonwork\html_knowledge\doghead.gif
以上即可成功加载出图片，使用图片绝对地址不用考虑 .html文档和 .gif 的位置关系，只要加上 file:/ + 图片绝对地址 （不过file:// + 图片绝对地址和file:/// + 图片绝对地址也可以）即可。
（2）url为相对地址，这种情况下要考虑example.html和doghead.gif的位置关系。
情况1：如果example.html和doghead.gif在同一文件夹下，都在html_knowledge文件夹下，
情况2：如果doghead.gif在images文件夹下(即images/doghead.gif)，而example.html和images在同一文件夹html_knowledge下，url值如下
情况3：如果doghead.gif在images文件夹下(即images/doghead.gif)，而example.html在htmls文件夹下(即htmls/example.html)，htmls和images在同一文件夹html_knowledge下，url值如下
以上就可此功加载出图片如下。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
