如何让HTML在直接从文件夹打开与VS Code Live Server运行时路径表现同步

你遇到的路径兼容问题核心是两种运行模式的根路径规则不一致：

以/开头的路径属于服务根绝对路径，会基于当前运行环境的根目录寻址

• 用Live Server运行时，HTTP服务的根目录是你当前项目的根文件夹，/images/works/5.jpg会自动映射到项目根目录/images/works/5.jpg，因此可以正常加载
• 直接双击打开HTML时，浏览器走file://本地文件协议，此时/指向你电脑磁盘的根目录（Windows下通常为对应磁盘根目录如C:\，macOS/Linux下为系统根目录），自然找不到存放在项目子目录中的图片，因此抛出Failed to load resource: net::ERR_FILE_NOT_FOUND错误

如果使用完整的本地file://协议路径，本地打开时可以寻址到对应文件，但Live Server运行在HTTP协议下，浏览器出于安全策略会禁止HTTP页面加载本地file://协议资源，因此会报错。

最优解决方法 #

• 开发阶段统一使用Live Server启动项目：该模式和线上部署的服务环境完全一致，避免本地文件协议和HTTP协议的特性差异，此时使用/开头的根绝对路径也可以正常运行
• 如果需要兼容直接打开HTML的场景，将路径改为相对路径即可：如果HTML文件存放在项目根目录，直接写images/works/5.jpg（去掉开头的/）；如果HTML存放在项目子目录，用../回退到对应层级即可，例如HTML在pages/list.html，就写../images/works/5.jpg

你完全可以使用Chrome进行开发，不需要强行更换为Firefox。二者的核心开发者工具功能没有本质差异，使用你更熟悉的Chrome可以获得更高的开发效率。
很多教程使用Firefox主要是因为其部分特性（如CSS兼容性提示、隐私友好配置等）有优势，但不影响普通前端开发的使用，你后续有相关需求再切换也完全没问题。

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