如何在Blazor 页面中显示 .avif 图像？

Question

AVIF 图像因其优于 jpg/png 等的超级优势而越来越受欢迎，但 .avif 图像无法在基于 Blazor 的网页中显示。

例如，在以下三个图像标签中，（2）是可以显示的webp格式;（1） 和 （3） 是 AVIF 格式，无法在 Razor 页面中显示。如果将 .avif 图像移动到纯 html 页面，它们可以显示在 Chrome 或 Safari 等浏览器中。

(1) <img src="/imgx/art/40-1.avif" alt="avif" />

(2) <img src="/imgx/art/40-1.webp" alt="webp" />

(3)

<picture>    
    <source media="(min-width:768)" srcset="/imgx/art/40-1.avif" type="image/avif" width="50%" height="auto">       
    <img src="/imgx/art/40-1.webp" alt="My blog" width="100%" height="auto">
</picture>

问：如何使基于 Blazor 的网页至少在流行的浏览器中显示 .avif 图像？

Note: 此问题总结整理于： How to display avif image in Blazor page?

Answer 1

你好， asp.net core服务器无法将 AVIF 识别为图像类型，因此即使浏览器可以支持它，它也无法在页面上正确呈现它。 您需要修改 asp.net core服务器无法将 AVIF 识别为图像类型，因此即使浏览器可以支持它，它也无法在页面上正确呈现它。因此，您需要修改静态文件中间件(UseStaticFiles)以启用对它的支持。 更多详情，您可以参考以下代码：

// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".avif"] = "image/avif";
app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});

结果如下：

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。 注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。