Twig/Timber主题设置自定义占位图时resize输出错误URL如何解决

问题原因 #

Timber提供的resize过滤器仅支持传入本地文件的绝对路径或TimberImage对象进行裁剪处理。你现有代码中定义的defaultimg是HTTP链接格式的字符串，当没有文章缩略图时，该URL直接传入resize过滤器，Timber无法识别远程URL对应的本地文件路径，错误拼接了站点根路径和主题文件的本地物理路径，最终产出错误的混拼URL。

解决方案 #

修改默认占位图的定义，直接传入本地路径生成TimberImage对象，让Timber自动处理路径和裁剪逻辑：

1. 修改默认占位图定义代码：

{% set defaultimg = TimberImage(site.theme.path ~ '/images/placeimage.png') %}

2. 调整图片调用逻辑，优先取文章缩略图，不存在时调用默认占位图的裁剪地址：

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

如果不想用TimberImage对象，也可以用条件判断分开处理，避免URL直接传入resize过滤器：

{% if post.thumbnail %}
    <img src="{{ post.thumbnail.src | resize(360, 240) }}" class="card-img-top">
{% else %}
    <img src="{{ site.theme.path ~ '/images/placeimage.png' | resize(360, 240) }}" class="card-img-top">
{% endif %}

两种方案都可以解决路径混拼的问题，裁剪后的图片输出格式和原逻辑保持一致。

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