Shopify无法通过URL加载图片 提示image_tag入参需为image_url

错误原因 #

抛出Liquid error: input to image_tag must be an image_url的核心原因是过滤器使用逻辑错误：

• img_url/image_url过滤器的合法入参只能是Shopify体系内的图片对象（包括section/block中image类型的配置项、产品图、集合图、后台文件库上传的图片对象），不能直接传入完整的带版本参数的CDN图片字符串。在硬编码CDN链接后串联调用img_url: '150x'，输出的结果不是合法的可被image_tag识别的图片地址类型，直接触发类型校验错误。
• 现有代码中手写<img>标签渲染section配置图的写法存在潜在问题：未做图片判空，后台未选择图片时会输出空src属性导致裂图。

正确修改方式 #

针对两处图片渲染逻辑分别调整：

1. 渲染Section配置项选择的图片 #

不要手写原生img标签，直接用Shopify官方过滤器组合，增加空值判断，示例代码：

{% if section.settings.image %}
  {{ section.settings.image | image_url: width: 800 | image_tag: alt: section.settings.image.alt, loading: 'lazy' }}
{% endif %}

代码逻辑说明：

• 先判断配置项是否已上传图片，避免空值错误
• 直接对图片对象调用image_url指定输出尺寸，生成合法图片地址
• 传入image_tag自动生成完整img标签，自动补充alt、懒加载等优化属性

2. 渲染固定CDN地址的图片 #

禁止对完整CDN链接直接调用img_url过滤器，分两种需求处理：

• 不需要裁剪尺寸：直接把CDN地址传入image_tag即可

  {{ 'https://cdn.shopify.com/s/files/1/0585/4674/9577/files/Untitled-1.jpg?v=1655109717' | image_tag: alt: '宣传图', loading: 'lazy' }}
  

• 需要裁剪为指定尺寸：不要写全CDN路径，直接通过文件名调用文件库的图片对象，再走裁剪逻辑（前提是图片已上传到当前店铺的后台文件库）

  {% assign site_fixed_img = 'Untitled-1.jpg' | file_image %}
  {% if site_fixed_img %}
    {{ site_fixed_img | image_url: '150x' | image_tag: alt: '缩略图', loading: 'lazy' }}
  {% endif %}
  

内容的提问来源于stack exchange，提问作者Muhammad Bin Saleem