Chrome加载图片报错Not allowed to load local resource问题求助

报错原因 #

你遇到的Not allowed to load local resource:报错是Chrome的默认安全策略导致的：浏览器禁止http/https协议的页面直接访问本地磁盘的file协议资源，你在img标签的src属性中填写了C盘的本地绝对路径，因此触发了该限制。

解决方案 #

• 优先使用相对路径引用静态资源：将需要用到的图片放到项目的专属静态资源目录（比如新建img文件夹与你的HTML文件同层级存放），修改src属性为相对路径即可，示例修改如下：

<img src="./img/pexels-ella-olsson-1640777.jpg" alt="Cat Image"/>

• 仅本地临时测试的场景，可以直接双击HTML文件通过file协议打开页面（地址栏开头为file:///），此时浏览器允许加载同设备的本地路径资源，该方式仅适合本地调试，无法用于线上环境。
• 本地开发推荐使用静态服务工具运行项目：比如VS Code的Live Server插件，启动后项目所有资源都会走本地http服务协议，不存在跨协议访问限制，也更贴近线上运行环境。

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