HTML本地图片无法加载问题：如何排查与修复？

你用file://本地绝对路径加载图片时，容易因为浏览器安全限制或路径细节问题导致加载失败，以下是实用解决方法：

1. 改用相对路径（最稳妥） #

把图片和HTML文件放在同一个目录，或者在HTML所在目录建个images子文件夹存图片，修改src路径即可：
比如HTML文件在D:/my-page.html，图片放在D:/images/里，代码改成：

<img src="images/Minecraft.png">
<img src="images/MinecraftDungeons.png">
<img src="images/MyFirendPedro.png"><br>
<img src="images/Roblox.png">
<img src="images/Roblox_Vesteria.png">
<img src="images/Retro.jpg"><br>

这种方式不会触发浏览器安全限制，本地打开或后续部署到服务器都能用。

2. 临时放宽浏览器安全限制（仅限本地测试） #

如果非要用绝对路径，可修改浏览器设置，但不推荐日常使用，存在安全风险：

• Chrome：右键Chrome快捷方式→属性→目标栏末尾加 --allow-file-access-from-files（注意前面有空格），确定后重启浏览器。
• Firefox：地址栏输入about:config→搜索security.fileuri.strict_origin_policy→双击将值改为false，重启浏览器。

3. 检查路径和文件细节 #

• 把file:///D:/Minecraft.png复制到浏览器地址栏，看能不能直接打开，打不开就是文件不存在或路径写错了。
• 核对文件名：比如MyFirendPedro.png是不是拼写错误（比如应为MyFriendPedro.png？），文件名大小写要和实际文件一致，部分浏览器会严格区分。
• 确认图片格式：比如Retro.jpg是不是真的JPG格式，别是改了后缀的其他文件（比如原本是PNG硬改成JPG），浏览器会识别失败。

你的原始代码：

<img src="file:///D:/Minecraft.png">
<img src="file:///D:/Minecraft.png"><img src="file:///D:/MinecraftDungeons.png"> <img src="file:///D:/MyFirendPedro.png"><br><img src="file:///D:/Roblox.png"><img src="file:///D:/Roblox_Vesteria.png"><img src="file:///D:/Retro.jpg"> <br>

内容的提问来源于stack exchange，提问作者Skate