使用nginx作为服务器在HTML中添加avif图像 [英] Add avif images in HTML using nginx as a server

问题描述

我用 heif-anc 创建了一些 avif 图像:

I created some avif images with heif-anc:

for i in card*.png ; do heif-enc "$i" -o "${i%.*}.avif" ; done

但是当我将它们添加到我的网站时，它只是建议下载图像.

But When I added them to my website, it just proposed to download the image instead.

然后我在我的 nginx-config 中启用 avif 图像 与

http {
  types {
    image/avif avif;
  }
  ...

现在它尝试显示图像，但它们似乎坏了.如果直接调用它，成功启用avif支持的Firefox会显示此错误消息:

Now it tries to display the image, but they seem to be broken. If you call it directly, Firefox with successfully enabled avif support shows this error message:

avif 无法显示，因为它包含错误

avif could not be displayed because it contains errors

在这里:您可以看到我尝试提供的 avif 文件:

Here: you can see the avif file I try to serve:

https://cards.incantata.de/cdn/avif_orig/card_63.avif

我是否必须以不同的方式创建 avif 图像才能让 Firefox 显示它?

Do I have to create the avif image in a different way so firefox can display it?

推荐答案

Firefox 尚无法显示 HEIF/HEIC 图像.

Firefox can't display HEIF/HEIC images yet.

为了通过heif-enc编码AVIF，添加-A参数.当您省略 -A 参数时，HEIC 文件被编码.

In order to encode AVIF via heif-enc, add -A parameter. When you omit -A parameter, HEIC file is encoded.

编码 AVIF 的另一种方法是使用 libavif 包中的 avifenc.

Alternative way of encoding AVIF is to use avifenc from libavif package.

这篇关于使用nginx作为服务器在HTML中添加avif图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！