shopify liquid 实现显示图片

Shopify Liquid 是 Shopify 商店自定义主题设计时使用的模板语言，它允许开发者轻松地控制页面内容的展示，包括图片。在 Liquid 中显示图片通常涉及以下几个步骤：

1. 使用 `image` 标签：Shopify 提供了一个内置的 `image` 标签来引用产品图片或者其他资源。基本语法如下：

   <img src="{% image product.featured_image.src %}" alt="{{ product.featured_image.alt | escape }}"/>

这里 `product.featured_image` 是一个对象，包含图片的信息，如 `src` 和 `alt` 属性。

2. 图片尺寸调整：你可以通过设置宽度和高度属性来指定图片大小，例如：

   <img src="{% image product.featured_image src='100x100' %}" alt="..." />

3. 链接与替代文本：如果你想链接图片到某个页面，可以添加 `link` 和 `width` 或 `height` 属性：

   <a href="{% link product.image.url %}">
     <img src="{% image product.image src='200x200' %}" alt="Image Description" width="200" height="200">
   </a>

4. 图片库选择：如果你需要从其他图片库（如特定类别、集合或自定义字段）选择图片，可以使用类似条件语句的方式来获取图片。