Django 模板中图片标签的问题

Question

我在 Django 模板中遇到一些图片标签问题。目标很简单，我只是想向我的网站添加 Avif、Webp 或 JPG/PNG 格式的图像。我已经像之前几次一样编写了 HTML，但不知何故它没有按预期工作。

所以问题如下：在第一次尝试中，AVIF 版本（对应于第一个源标签）加载良好👌🏻，但如果我从服务器中删除它（或更改其名称），我期待的是 WebP尽管会显示 alt 消息，但要加载的版本。

这是我的代码：

<picture>
            <source srcset="{% static 'my_app/img/' %}{{ topic.image|avif_image }}" type="image/avif">
            <source srcset="{% static 'my_app/img/' %}{{ topic.image|webp_image }}" type="image/webp">
            <img src="{% static 'my_app/img/' %}{{ topic.image|original_image }}" alt="{{ topic.name }} image" loading="lazy">
</picture>

注意： avif_image、webp_image 和 original_image 只是我创建的一些自定义过滤器，用于返回每个图像的名称，而 topic 是从视图发送到模板的字段。

我意识到浏览器总是尝试加载第一个源标签，我的意思是，如果我重新排序代码并将 WebP 设置为第一个，我会遇到同样的问题，但角色会发生变化，因为浏览器总是尝试加载WebP 版本并且（显然）忽略了 AVIF srcset 和后备。

由于重新排序代码可以正确显示Webp和JPG版本，我认为这不是与浏览器兼容性有关的问题。

我真的不知道这里发生了什么，我在互联网上找不到类似的东西，所以我真的很感激任何答案。如果我可以提供更多有用的信息来检测问题的根源，我将很乐意这样做。预先感谢！