HTML页面无法正常显示插入的图片，已确认路径正确如何解决？

问题原因 #

• 浏览器安全策略限制：默认禁止网页直接读取本地磁盘的文件，防止用户隐私泄露，即使本地路径写对了也不会加载。
• 路径格式不符合Web标准：Windows系统默认的反斜杠\不能直接用在HTML的资源路径里，Web标准统一使用正斜杠/。

修复方案 #

方案1（推荐，适用于本地测试和正式上线） #

把图片和你写的HTML文件放在同一个目录下（或者HTML文件所在目录的子文件夹中），使用相对路径引用：

<!-- 图片和HTML文件同目录 -->
<img src="./A.JPG" alt="picture of angle" />

如果图片存放在同目录的imgs子文件夹中，写法如下：

<img src="./imgs/A.JPG" alt="picture of angle" />

方案2（仅适用于自己本地临时测试） #

如果一定要直接调用下载文件夹里的图片，把路径改成file协议格式，同时把反斜杠替换为正斜杠：

<img src="file:///C:/Users/96650/Downloads/A.JPG" alt="picture of angle" />

注意：该写法仅在你自己本地打开HTML时生效，其他人访问你的网页时完全看不到这张图，正式项目不要使用。

内容的提问来源于stack exchange，提问作者HADEEL هديل