尝试在 Twig 模板中使用带有 css 变量的背景图像

Question

所以我有一个问题。我想将 background-image 与 css 变量一起使用，并且在我的项目中，我使用 Twig 在循环中一篇一篇地显示文章，这些文章是通过 sql 请求从我的数据库中选择的。每篇文章都有数据库中图片的相对链接，所以可以在网站上看到。

问题是，我想使用我数据库中的相同图像链接到文章背景。

我尝试使用这样的 css 变量：

div.liste {
        position: relative;
        display: flex;
        background-image: var(--image);
        animation: liste_appear .5s cubic-bezier(0.33, 1, 0.68, 1) 1 calc(var(--order) * 50ms) backwards;
        /*rest doesn't matter*/
}

然后，在模板中，它看起来像这样

{% for produit in produit %}
{% set compteur = compteur + 1 %}
<div class="liste" style="--order: {{ compteur }}; --image: {{ produit.image }}">
    <img src="{{ produit.image }}">
</div>
{% endfor %}

如您所见，我正在使用另一个 Twig 变量，每次循环时它都会上升，并且它与 css 一起工作（动画延迟 50 毫秒乘以变量“compteur”打开的数字）但我不知道为什么它不使用图像变量...

此外，{{ produit.image }} 可以正常工作，因为它可以正确显示图像。

如果有人有答案，很高兴解决并感谢这个人！

Answer 1

<div class="liste" style="--order: {{ compteur }}; background-image:url('{{ produit.image }}');">
<img src="{{ produit.image }}">

div.liste {
        position: relative;
        display: flex;
        
        animation: liste_appear .5s cubic-bezier(0.33, 1, 0.68, 1) 1 calc(var(--order) * 50ms) backwards;
        /*rest doesn't matter*/
}

如果你按照上面的例子更新你的内联样式，echo 应该正确放置链接。从你的 css 中删除 background-image var 声明，因为它没有输出任何东西，因为它正在寻找 css 而不是 twig 变量，并且无论如何都会被内联样式覆盖。