本地直接打开HTML文件不显示图片 仅编辑器Live Server正常如何解决

核心差异是两种打开方式的运行协议不同：编辑器的Live Server本质是启动了本地HTTP服务，走HTTP/HTTPS协议；直接双击打开HTML走的是file://本地文件协议，两者的路径解析规则、安全限制完全不同，按照以下步骤排查即可解决：

1. 修正路径写法 #

首先确认你的项目目录结构符合以下规范：

你的项目文件夹/
├─ index.html
└─ images/
   └─ photo.jpg

• 禁止使用/images/photo.jpg这种根路径写法：file协议下的根路径对应你本地磁盘的根目录，不是项目文件夹，必然找不到资源
• 正确写法只用images/photo.jpg或者./images/photo.jpg即可，两者在当前场景下等价

2. 检查文件名大小写 #

Windows系统大小写不敏感，所以Live Server运行时可能自动兼容大小写差异；但Mac、Linux系统的file协议对大小写完全敏感，如果实际图片名为Photo.JPG、文件夹名为Images，你写的路径是images/photo.jpg就会加载失败，确保路径里的所有文件名、文件夹名和实际完全一致。

3. 解决file协议安全限制 #

如果路径、大小写确认完全正确还是加载失败，就是浏览器的file协议安全策略默认禁止了跨本地文件的资源加载，有两种不用编辑器的解决方案：

• 方案一：修改浏览器启动参数（以Chrome为例）
  右键Chrome快捷方式→「属性」，在「目标」栏的末尾加一个空格，输入--allow-file-access-from-files，保存后用这个快捷方式打开HTML文件即可解除限制
• 方案二：本地启动简易HTTP服务
  如果你的电脑安装了Python，直接在项目文件夹右键打开终端，输入对应命令：
  Python2环境：python -m SimpleHTTPServer 8000
  Python3环境：python -m http.server 8000
  执行后在浏览器地址栏输入http://localhost:8000即可访问，效果和编辑器的Live Server完全一致。如果安装了Node.js，也可以全局安装http-server包后执行http-server命令启动服务。

4. 本地完整路径无效说明 #

你直接填写磁盘完整路径比如C:\项目\images\photo.jpg无法生效是正常的，file协议下的本地路径需要转成URI格式，比如Windows下要写成file:///C:/项目/images/photo.jpg才能识别，但这种写法只能你自己本地使用，项目上传到服务器后会完全失效，非常不推荐使用。

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