在 twig/timber 主题中设置自定义占位符图像

Question

所以我遇到了一个 twig/timber 问题，我很难获得 placeimage 集，这是我目前所拥有的：

{% set defaultimg = site.theme.link ~ '/images/placeimage.png' %}

然后在我的代码中我有：

<img src="{{ post.thumbnail.src | default(defaultimg) | resize(360, 240)}}" class="card-img-top">

post.thumbnail.src 可以很好地提取图像，但如果 post 没有附加特色 Img，我希望 defaultimg 从我的自定义主题图像文件夹中提取图像。但目前这是输出一个真正错误的 url of:

<img src="https://toolcart.local/wp-contentC:\Users\User\Local Sites\toolcart\app\public\wp-content\themes\toolcart-theme\images/placeimage-360x240-c-default.png" class="card-img-top">

但是 {{defaultimg}} 可以正确输出图像 url。

https://toolcart.local/wp-content/themes/toolcart-theme/images/placeimage.png

我不确定接下来要尝试什么？

Answer 1

这是 twig/timber 定义路径的方式问题！！！超级奇怪的做事方式给项目增加了不必要的复杂性。

也就是说，根据 their documentation，您可以在 defaultimg 变量的末尾添加一个名为 relative 的过滤器，它将绝对值 URL 转换为相对的，它最终会输出正确的默认图像路径。

所以你的代码应该是这样的：

• 正在定义默认图像的路径：

{% set defaultimg = Image(site.theme.link ~ '/images/placeimage.png') | relative %}

注意：
| relative 过滤器可以解决这个问题。

• 在图片源属性中调用：

<img src="{{ post.thumbnail.src | default(defaultimg) | resize(360, 240)}}" class="card-img-top">

我刚刚测试了代码，它运行良好！让我知道你是否也能让它工作！