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

Chrome浏览器直接打开本地HTML文件时，引用这类绝对路径图片，大概率会报错“Not allowed to load local resource”。这其实是个挺常见的坑——浏览器主动切断了file://协议下对本地磁盘的任意读取能力，不是bug，而是强制安全策略，设计之初就决定了。

那为什么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": [""] }]
然后在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请求仍会失败，用http-server更稳妥。

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