python - 如何从静态标签 wagtail 2.5 中的变量提供 webp

Question

我制作了一个可订购的轮播。每个实例都有一个图像和字符字段，通过图片元素表示 webp 文件名。当我硬编码 srcset 而不是使用 {{variable}} 时，webp 图像加载完美。

问题是，这使得管理后端无法保持动态，并且让我对网站上的每张图片或我想要在谷歌上排名的页面进行硬编码。我读过很多其他帖子，但我仍然卡住了。有没有办法从后端干净地提供 webp 文件名？

我已经读过。

load static file with variable name in django

django 1.5 - How to use variables inside static tag

这个最接近解决我的问题，但还不够。

https://snakeycode.wordpress.com/2015/02/20/variables-in-django-static-tags/

轮播可排序字段

carousel_image = models.ForeignKey("wagtailimages.Image",       on_delete=models.SET_NULL,related_name="+",) 
webp = models.CharField(max_length=100, blank=True, null=True)

主页模板轮播

{% for loop_cycle in self.carousel_images.all %}
{% image loop_cycle.carousel_image max-750x500 as img %}

<picture>
<source srcset="{% static '{{loop_cycle.webp}}'%}" type="image/webp" >
<img src="{% static '{{img.url}}'%}" alt="{{ img.alt }}">
</picture>

因为当我进行硬编码时，这很完美，但是拥有一个具有下一代图像友好的可订购功能的轮播有什么意义呢？感谢您阅读我要疯了？

<picture>
<source srcset="{% static '{{loop_cycle.webp}}'%}" type="image/webp" >
<img src="{% static '{{img.url}}'%}" alt="{{ img.alt }}">
</picture>

因为当我进行硬编码时，这很完美，但是拥有一个具有下一代图像友好的可订购功能的轮播有什么意义呢？感谢您阅读我要疯了？

Answer 1

好吧，做了一些摆弄，发现这里是工作代码。

<picture>
<source srcset="{% static 'webp/'|add:loop_cycle.webp|add:'.webp' %}" type="image/webp" >

<img src="{% static 'webp/'|add:loop_cycle.webp|add:'.webp' %}" alt="{{ img.alt }}">
</picture>

我太开心了!!!!