如何在Eleventy-img短代码中正确渲染Nunjucks变量？

问题出在你给image短代码传参时，用双引号包裹了变量模板语法{{foo.src}}，导致Nunjucks将其当作纯字符串字面量处理，而非解析变量的值。Eleventy会尝试查找名为{{foo.src}}.png的文件，自然会出现文件不存在的错误。

修正方案 #

直接传递变量名，不需要添加双引号和模板语法包裹，因为短代码本身处于Nunjucks模板上下文内，可以直接引用变量：

{% for foo in bar %}
    {% image foo.src, "alt", "sizes", "imgClass" %}
{% endfor %}

如果alt、sizes、imgClass这些参数也需要使用变量（比如来自foo对象的属性），同样直接传递变量名即可：

{% for foo in bar %}
    {% image foo.src, foo.alt, foo.sizes, foo.imgClass %}
{% endfor %}

原理：Eleventy的Nunjucks短代码参数支持直接引用模板上下文里的变量，当参数是不带引号的标识符时，Nunjucks会自动解析它对应的变量值，而非当作字符串处理。

内容的提问来源于stack exchange，提问作者Gerrit