在 Azure webp 图像上托管 Blazor WASM 无法加载

Question

我有一个 Blazor Web 组装项目。在图像文件夹中，我混合了 jpg 和 webp 图像。当我将客户端发布到 Azure 时，所有 jpg 图像都可以正常工作，而所有 webp 图像则不能。查看浏览器的检查器，我看到了图像名称

   Failed to load resource: the server responded with a status of 404(not found) 

我的图像在剃刀中，其源路径如下

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

Google 和 Firefox 都存在这个问题，所以我不认为这是特定于浏览器的问题，据我了解，所有现代浏览器都支持 webp 图像。

我在某处读到，问题可能是“图像”前面的前导反斜杠，但删除它对发布的网站没有任何影响。

Answer 1

我已在 Blazor WASM 应用程序的

wwwroot

目录中添加了图像文件夹。

• Add 尝试在

  Index.razor

  中显示图像。
• 最初我也遇到了同样的错误。

Failed to load resource: the server responded with a status of 404 (Not Found) 

• 我们需要在

  web.config

  文件中显式添加配置以允许

  .webp

  扩展图像。

• 当我们将Web App部署到Azure App服务时，将会在应用程序的根目录中生成带有一些默认设置的

  web.config

  文件。

• 我在

  web.config

  文件中添加了以下mimemap设置。

<mimeMap fileExtension=".webp" mimeType="image/webp" />

输出：

注意：

每当您发布Web应用程序时，您在门户中所做的

web.config

文件中的设置都会丢失。

如果您不希望出现这种类型的行为，请在本地 Web 应用程序中添加 web.config 并发布指定的更改。