网页托管及VS Code预览时静态图片无法加载但GIF正常

核心问题定位 #

你提供的静态图片URL存在格式错误：URL末尾的/400属于无效路径后缀，导致服务器无法正确识别资源地址。本地Chrome打开时可能自动忽略了无效后缀，或是依赖缓存加载了正确资源，但VS Code预览、网页托管环境会严格解析URL，因此加载失败。而GIF图片的URL格式正确，所以能正常加载。

修复步骤 #

1. 修正静态图片URL：去掉URL末尾的/400，正确的代码应为：

   <img width="300" height="500" src="https://static.wikia.nocookie.net/onepiece/images/6/6d/Monkey_D._Luffy_Anime_Post_Timeskip_Infobox.png/revision/latest/scale-to-width-down/239?cb=20200429191518" alt="Luffy appearance after time-skip" />
   

2. 排查防盗链限制（可选）：如果修正URL后仍无法加载，可能是图片源站的防盗链机制拦截了请求。此时可以：
   • 将图片下载到本地，作为本地资源引用
   • 使用支持跨域中转的图片处理工具转换资源地址

额外提示 #

• 引用外部图片时，务必检查URL格式，避免多余的路径或参数后缀
• 本地环境与线上托管环境的URL解析规则存在差异，测试时尽量模拟线上场景

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