为何HTML中图片作为链接无法显示？仅VS Code Live Server出问题

针对你遇到的仅在VS Code Live Server扩展中图片不显示、网页空白的问题，可以按以下步骤排查：

• 核对文件名大小写：HTTP服务器（Live Server基于此）区分文件名大小写，本地文件系统可能不区分。确认你的图片文件名是DFDD.png，和代码里的src="DFDD.png"完全一致，包括大小写。
• 确保Live Server从正确目录启动：右键点击你的HTML文件，选择「Open with Live Server」，而不是直接点击Live Server的启动按钮。如果VS Code工作区根目录不是HTML文件所在目录，直接启动Live Server会导致图片路径错误。
• 检查浏览器控制台报错：按F12打开开发者工具，查看「Console」标签是否有404错误（提示找不到图片），「Network」标签里查看图片请求的状态码。如果是404，说明路径配置有问题；如果是其他错误，根据提示调整。
• 临时关闭Brave的Shields保护：Brave的默认隐私保护可能阻止本地资源加载，点击地址栏右侧的狮子图标，关闭当前网站的Shields，测试图片是否显示。
• 验证图片文件完整性：替换一张确定可用的图片（比如test.png），修改代码里的src路径，测试能否正常显示，排除原图片损坏的可能。
• 检查Live Server扩展设置：打开VS Code设置，搜索「Live Server」，确认「Settings: Root」设置为正确的目录，或者「Settings: Custom Browser」指向正确的Brave浏览器路径。

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