为什么Google Chrome无法加载本地文件出现Not allowed to load local resource提示？

Chrome禁止file://协议加载本地绝对路径图片是因同源策略将每个file:///页面视为独立源，跨源访问被拦截；有效解法为：一、扩展中用chrome.runtime.getURL()配web_accessible_resources；二、启动本地HTTP服务（如npx http-server）；三、开发时临时启用--allow-file-access-from-files参数（新版可能失效）。

Chrome浏览器直接打开本地HTML文件时，引用<img src="D:/pics/photo.jpg">这类绝对路径图片会报错“Not allowed to load local resource”，根本原因是浏览器主动切断了file://协议下对本地磁盘的任意读取能力，这不是bug而是强制安全策略。

为什么Chrome要阻止本地资源加载

Chrome把每个file:///xxx页面视为独立源，而同源策略禁止该源发起跨源请求——哪怕目标文件就在同一块硬盘上。你写的src="D:/a.png"会被解析成另一个file://源，触发拦截。Linux系统路径斜杠方向、空格、中文名还会加剧解析失败，这不是权限没加够，是架构级限制。

manifest.json里写"permissions": ["fileSystem"]或"all_urls"完全无效，因为扩展内容脚本仍运行在受限渲染进程中，无法绕过沙箱对file://的封锁。

真正能用的三种解法

方法一：用chrome.runtime.getURL()加载扩展内置资源
只适用于你把图片、JS等文件放在扩展包内（如/images/icon.png），在manifest.json中必须显式声明：
"web_accessible_resources": [{ "resources": ["images/*.png"], "matches": ["<all_urls>"] }]
然后在JS里写：document.getElementById("logo").src = chrome.runtime.getURL("images/icon.png");
【不声明web_accessible_resources，即使文件存在也404】

方法二：启动本地HTTP服务，把file://换成http://localhost
这一步操作起来很简单，直接把文件拖进去就行：
① 打开终端，进入你的项目根目录
② 运行npx http-server -p 8080（自动安装并启动）
③ 浏览器访问http://localhost:8080/index.html
所有相对路径（如./assets/bg.jpg）立刻生效，无需改代码。注意别用python -m http.server——它默认不支持CORS，AJAX请求仍会失败。

方法三：Chrome启动时临时放宽限制（仅限开发）
关闭所有Chrome窗口→在终端执行：
google-chrome --allow-file-access-from-files --user-data-dir=/tmp/chrome-dev
这个命令会新建一个独立配置目录，避免污染日常浏览数据。但2025年之后的Chrome版本已逐步废弃该参数，部分新版会静默忽略，不报错也不生效。