VS Code预览正常但HTML文件无法显示PNG图片求助

安全阿岳

2026-7-22

问题排查与解决

针对你遇到的VS Code预览图片正常，但直接打开HTML文件图片断裂的问题，可从以下几点排查：

文件名大小写不匹配：VS Code预览通常不区分文件名大小写，但浏览器直接打开时会严格校验。检查HTML里写的birthday project screenshot.png和实际图片文件的大小写是否完全一致，比如是否存在Screenshot和screenshot这类大小写差异。
文件名含空格/特殊字符：图片文件名里的空格可能导致浏览器解析路径出错。建议把文件名改成无空格格式，比如birthday-project-screenshot.png，同时更新HTML代码里的路径：
```
<img src="./birthday-project-screenshot.png" height="200"/>
```
相对路径基准错误：确认图片和index.html确实在同一文件夹下。如果图片在子目录（比如images文件夹），需要把路径改成对应相对路径，比如./images/birthday project screenshot.png。
浏览器缓存干扰：浏览器可能缓存了旧的错误资源，尝试用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或者用隐私模式打开HTML文件。