Google Chrome无法加载WebP图片，VSCode打开也报错求解决方案

问题重现 #

在Chrome中打开本地HTML文件时，<img>标签引用的undevelopedsite.webp仅显示占位图标；在VSCode中点击图片链接也提示“加载图片时发生错误”，更换图片及格式后问题依旧，代码无语法错误：

<!DOCTYPE html>
<html>
  <body>
    <p>Sorry, this page is still in development</p>
    <img src="undevelopedsite.webp" > 
  </body>
</html>

排查与解决步骤 #

• 严格核对文件路径与命名
  确保图片文件和HTML文件在同一目录下，文件名完全匹配（包括大小写，比如Undevelopedsite.webp和小写文件名会被Chrome视为不同文件）。如果图片在子目录，src要写对应相对路径，比如src="img/undevelopedsite.webp"。

• 验证图片文件完整性
  直接用系统自带的图片查看器打开undevelopedsite.webp，如果打不开，说明文件本身损坏，重新导出或下载图片。换格式后仍失效的话，检查新图片是否真的替换了原文件，或者路径是否对应正确。

• 用本地服务器打开HTML（解决Chrome本地文件限制）
  Chrome直接打开本地HTML文件时可能存在访问限制，改用本地服务器加载：

  • 用Python启动简易服务器：进入HTML所在文件夹，执行python -m http.server 8000，然后在Chrome访问http://localhost:8000/你的文件名.html
  • 或者用VSCode的Live Server插件，右键HTML文件选择「Open with Live Server」

• VSCode端排查

  • 暂时禁用所有第三方图片预览插件，排查插件冲突
  • 确认图片所在文件夹已添加到VSCode工作区，未添加的话手动拖拽文件夹到VSCode侧边栏

内容的提问来源于stack exchange，提问作者Süntje S