Shopify image_url过滤器生成错误图片URL，参数顺序异常求助

问题重现 #

使用以下Liquid代码生成带裁剪的图片URL时：

{{- product.featured_image | image_url: width: 500, height: 500, crop: 'center' | image_tag: loading: 'lazy' -}}

生成的URL中width参数被错误放在缓存破坏参数v之后，导致Shopify CDN无法正确处理裁剪逻辑：

<img src="//cdn.shopify.com/s/files/1/0549/6229/0788/products/untitled.jpg?crop=center&height=500&v=1665271372&width=500" alt="falling moon" srcset="//cdn.shopify.com/s/files/1/0549/6229/0788/products/untitled.jpg?crop=center&height=500&v=1665271372&width=352 352w" width="500" height="500" loading="lazy">

只有将参数调整为crop=center&width=500&height=500&v=xxx的顺序，才能触发正确的裁剪效果。

修复方案 #

方案1：使用replace过滤器修正参数顺序 #

通过字符串替换将width和height参数移到v之前：

{% assign raw_image_url = product.featured_image | image_url: width: 500, height: 500, crop: 'center' %}
{% assign fixed_image_url = raw_image_url | replace: '&width=500', '' | replace: '&height=500', '' | replace: '&v=', '&width=500&height=500&v=' %}
{{ fixed_image_url | image_tag: loading: 'lazy' }}

方案2：手动拼接正确顺序的URL #

直接提取基础图片URL和版本号，手动拼接参数：

{% assign base_image_path = product.featured_image.src | split: '?' | first %}
{% assign image_version = product.featured_image.src | split: 'v=' | last %}
{% assign fixed_image_url = base_image_path | append: '?crop=center&width=500&height=500&v=' | append: image_version %}
{{ fixed_image_url | image_tag: loading: 'lazy' }}

方案3：尝试旧版img_url过滤器 #

官方推荐的image_url可能存在参数排序bug，换回旧版img_url过滤器试试：

{{ product.featured_image | img_url: '500x500', crop: 'center' | image_tag: loading: 'lazy' }}

原因说明 #

Shopify的image_url过滤器在同时处理width、height和crop三个参数时，内部参数排序逻辑出错，导致尺寸参数被后置到缓存参数v之后。而Shopify CDN的图片处理逻辑会忽略v之后的参数，因此无法执行指定的裁剪操作。

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