Chrome可加载本地图片但Firefox无法加载，问题原因是什么？

核心原因 #

Firefox对本地文件（file://协议）的安全限制比Chrome更严格，常见触发场景和原因如下：

• 严格同源策略限制：Firefox默认启用security.fileuri.strict_origin_policy设置，当本地HTML文件中的图片被<a>标签包裹时，会触发同源检查限制，导致图片无法加载，而Chrome对本地文件的同源限制更宽松。
• 文件权限问题：如果图片文件的系统权限设置为Firefox无法读取（比如Windows下的只读权限、Linux/macOS下的用户权限不足），Firefox会无法加载图片，而Chrome可能绕过了部分权限检查。
• 路径解析差异：Firefox对file://协议下的相对路径解析更严格，若HTML文件和图片的目录关系被Firefox错误解析，也会导致加载失败。

解决方法 #

• 调整Firefox安全设置：
  1. 在Firefox地址栏输入about:config并回车，确认风险提示。
  2. 搜索security.fileuri.strict_origin_policy，将其值改为false。
  3. 重启Firefox后重新打开HTML文件。
• 检查文件权限：
  右键图片文件，确保当前用户拥有读取权限（Windows下取消“只读”勾选，Linux/macOS下执行chmod +r youtubeLogo.png）。
• 修改HTML结构：
  将<a>标签仅包裹文本，避免图片被链接标签包裹触发限制：

  <body>
      <img src="./youtubeLogo.png" alt="YouTube">
      <a href="https://youtube.com">
          <h1>YouTube</h1>
      </a>
  </body>
  

• 使用绝对路径：
  将图片的src改为绝对路径，比如Windows下的C:/your-folder/youtubeLogo.png，Linux/macOS下的/home/your-user/your-folder/youtubeLogo.png。

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