Azure部署Blazor WASM后WebP图片无法加载的问题排查

问题描述 #

Blazor WebAssembly项目的images目录下同时存在jpg和webp格式图片，发布到Azure后：

• jpg图片显示正常
• 所有webp图片加载失败，浏览器控制台返回404错误
• 图片在Razor组件中的引用示例：

  <img src="/images/Audiolithe.webp" />
  <img src="/images/about.jpg" />
  

• 问题在Chrome、Firefox中均复现，排除浏览器兼容性原因

已尝试的无效操作 #

• 删除图片路径开头的斜杠
• 在项目中添加包含WebP MIME类型映射的web.config并重新发布

解决步骤 #

参考方案通过Azure门户配置MIME类型映射：

1. 登录Azure门户，打开对应的App Service实例
2. 在左侧菜单选择配置 > MIME类型
3. 点击添加按钮，填入：
   • 扩展名：.webp
   • MIME类型：image/webp
4. 保存配置，等待服务器应用更改后重新访问站点

完成后WebP图片即可正常加载。

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