时间戳

首页 > 解决方案 > Shopify：从 for 循环中获取图像 URL

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

问题描述

我是 Shopify 的新手。我已经开始实现主题定制，并为图像和链接创建了一个重复的动态部分。现在我遇到的问题是，当我尝试获取该值时，它什么也没显示，但是当我检查调试时，我发现了这一点。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 %}

标签： shopify

解决方案

您正在尝试将图像对象输出为 src 属性的值，而您实际上需要那里的 URL。如 Shopify Docs for Image Picker中所定义：

在 Liquid 中，image_picker 设置的值可以是图像对象（如果图像已被选择且存在）或 nil（如果图像尚未被选择或图像不存在）。可以使用img_url过滤器生成图像的 URL。图像对象还具有对 alt 文本的内置支持。

所以使用 nil check 和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 %}

推荐阅读