Shopify：从 for 循环中获取图像 URL

Question

我是 Shopify 新手。我已经开始实施主题定制，并为图像和 link 创建了一个重复的动态部分。现在我遇到的问题是，当我尝试获取该值时，它什么也没显示，但是当我检查调试时，我发现了这个。 https://prnt.sc/tntt73

这是我的代码。

<hr>
<div id="page-width section-cta">
  <div class="section-header text-center">
    <h3> {{ section.settings.text-box }} </h3>
  </div>
  <div class="logo_slider">
  {% for block in section.blocks %}  
    {{ block.settings }}
    <div class="item">   
      <a href="{{ block.settings.link }}"><img src="{{ block.settings.image }}" /></a>
    </div> 
    {% endfor %}
  </div>

</div>  
<hr>
{% schema %}
{
  "name": "Image Slider Section",
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Image Slider"
    }
  ],
  "blocks": [
    {
      "type": "select",
      "name": "Image",
      "settings": [
        {
          "id": "link",
          "type": "url",
          "label": "Image link"
        },
        {
          "id": "image",
          "type": "image_picker",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Slider Section",
      "category": "Custom Dynamic Section"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Answer 1

您试图将图像对象输出为 src 属性的值，而实际上您在那里需要 URL。如 Shopify 文档中定义的 Image Picker:

In Liquid, the value of image_picker settings is either an image object (if an image has been selected and exists) or nil (if an image has not been selected, or the image doesn't exist). A URL for the image can be generated using the img_url filter. The image object also has built-in support for alt text.

因此使用 nil 检查和 img_url 过滤器，您的代码将是

{% for block in section.blocks %}
    {%if block.settings.link != nil and block.settings.image != nil%}
        <div class="item">
            <a href="{{ block.settings.link }}"><img src="{{ block.settings.image.src | img_url: "medium" }}" /></a>
        </div> 
    {% endif %}
{% endfor %}

Shopify：从 for 循环中获取图像 URL

Shopify: Get an image URL from for loop

shopify