Shopify Online Store 2.0

动态源绑定图片后前台 image_url 输出为空

现象#

把图片设置连到 file_reference metafield,前台 img 的 src 为空或报 invalid url input,编辑器预览里却显示正常。

原因#

  • 直接输出 metafield 得到的是对象或 GID 字符串,不是图片对象,image_url 无法处理
  • 列表型文件 metafield 的值是数组,必须遍历后逐个取元素
  • 文件被存为 GenericFile 时只有 .url,image_url 只对图片资源生效
  • 编辑器预览用的是设置里的静态预览图,掩盖了前台取值错误

处理步骤#

  1. 先用 assign 取出 metafield 的 .value,再交给 image_url 处理
  2. 列表型字段的值是数组,用 for 遍历 .value 逐个输出
  3. 图片用 image_url 加 image_tag,非图片文件改用 .url
  4. 外面加空值判断 {% if img != blank %},避免输出空 src
  5. 关掉编辑器预览,用未登录窗口或 curl 查看真实 HTML

验收标准#

前台 img 的 src 为 cdn.shopify.com 地址并带 width 参数,控制台无 invalid url 报错。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。