Firefox Inspector修改样式引用本地文件无法加载问题咨询

你遇到的情况确实是火狐的默认安全特性导致的，核心原因有两点：

1. 跨源访问限制：你当前预览的站点是http/https协议页面，和file://协议属于完全不同的源，火狐默认禁止网页（包括通过开发者工具修改的页面内容）加载本地file://协议的资源，目的是防止恶意网站窃取用户本地文件数据。
2. 本地文件的额外权限限制：哪怕你点击开发者工具中的URL新开标签页打开同路径的图片，只要这个新标签页的发起源是之前的http/https站点，火狐也会继承跨源限制阻止加载；只有你直接在空白标签页的地址栏手动输入路径，或者直接把文件拖到空白火狐窗口打开，才能正常访问。

可用的解决方案 #

• 临时调整火狐配置（仅本地开发使用，用完建议恢复默认值）
  在地址栏输入about:config，搜索参数security.fileuri.strict_origin_policy，将布尔值改为false即可临时放开file协议的跨源限制，预览结束后改回true即可规避安全风险。
• 无配置修改的安全方案
  你可以将本地图片转成Base64编码，直接把Base64字符串填入url()中，示例格式如下：

  background-image: url(data:image/jpeg;base64,【你的图片Base64编码】);
  

  该方式不存在跨源问题，不需要调整浏览器任何配置。
• 本地临时静态服务方案
  在图片所在目录下启动本地临时静态服务，比如用Python执行命令：

  python3 -m http.server 8000
  

  之后将资源地址替换为http://localhost:8000/format-BG.jpg即可正常加载，适配所有开发场景。

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