Shopify image_tag 不生成 srcset 怎么修
现象#
把 img_url 换掉后用 image_tag 输出商品卡,2x 屏幕上图仍发虚;DevTools 里 img 只有 src,没有 srcset 和 sizes。
原因#
- image_tag 只有在同时传入 widths 与 sizes 时才生成 srcset,单传 width 只得到一张图
- 传进去的是字符串地址而不是 image 对象,读不到原始宽高,无法生成候选尺寸
- 已经用 image_url 缩过一次,又在 image_tag 里传 width,重复缩放后源图变小
- 主题里还留着已废弃的 img_url 调用,新参数在那条链路上不生效
处理步骤#
- 确认拿到的是 image 对象,例如
product.featured_image,不是 URL 字符串 - 输出时给出候选宽度:
{{ product.featured_image | image_tag: widths: '300,600,900,1200', sizes: '(min-width: 750px) 50vw, 100vw' }} - 同时补上
alt、width、height,避免布局抖动 - 全主题搜索
img_url,逐处替换为image_url - 在 DevTools 里把设备切到 2x,确认实际下载的是 600 或更大的候选图
验收标准#
商品卡 img 标签带有 srcset 与 sizes,2x 屏加载的图片宽度不小于展示宽度的两倍,放大后边缘清晰。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。