VSCode Live Server中img标签URL无法生效问题求助

1. 本地路径匹配问题 #

你提到URL一致，但Live Server的运行根目录可能和你本地文件结构的认知有偏差：

• 若使用相对路径（如./img/xxx.png），确认VSCode打开的是整个项目文件夹而非单个文件——如果只打开单个文件，Live Server的根目录会是该文件所在目录，而非项目根，导致路径指向错误
• 绝对禁止使用本地磁盘路径（如C:\xxx\img.png），浏览器在HTTP服务环境下无法直接访问本地磁盘资源，而JSBin/CodePen是在线环境会自动处理路径逻辑

2. Live Server 缓存干扰 #

静态资源缓存可能导致新图片无法加载：

• 按Ctrl+Shift+R强制刷新浏览器，跳过缓存加载资源
• 右键点击VSCode状态栏的Live Server图标，选择「Stop Live Server」后重新启动

3. 系统安全工具拦截 #

Windows防火墙或杀毒软件可能拦截Live Server的静态资源请求：

• 暂时关闭Windows防火墙（仅用于测试，测试后记得重新开启），观察图片是否能正常加载
• 检查杀毒软件的网络监控规则，确认未拦截Live Server默认端口（5500）的请求

4. Live Server 配置隐性异常 #

即便你没手动修改过设置，扩展本身的配置也可能出现隐性问题：

• 打开VSCode设置，搜索Live Server: Root，确认设置的根目录为你的项目根文件夹
• 搜索Live Server: Custom Browser，切换到Chrome/Firefox等其他浏览器测试，排除当前浏览器的兼容性问题

5. 本地文件权限限制 #

图片文件或所在文件夹的权限可能导致Live Server无法读取：

• 右键图片文件，选择「属性」→「安全」，确认当前用户拥有读取权限
• 避免将项目放在系统保护目录（如C:\Program Files、受保护的桌面文件夹），这类目录会限制第三方程序的读写权限

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