Shopify 在富文本框中添加图像在添加后显示损坏的图像

Question

我正在尝试使用架构和 Shopify 液体在 Shopify 中添加新块。我添加了架构，预计将在左侧添加/导入图像，在右侧添加/导入图像。我创建了动态块只是为了显示两个图像。当我添加我的架构时，我能够看到图像富文本框来添加图像，但是当我添加图像时，我将它们作为损坏的图像得到，当我在浏览器中检查它们时，我只是得到<img src=/>。我很关闭，但这里缺少一些东西。<img src={{settings.block.image}} /> 有什么问题吗？谢谢。

自定义块

 {% elsif block.type == 'side_by_side' %}

<div class="homepage_content clearfix" >
  <div class="container">
    <div class="eight columns image_column">
      <img src={{settings.block.image}} /> 
    </div>
    <div class="eight columns image_column">
      <img src={{settings.block.image}} /> 
    </div>
     </div>
</div> 

架构

   {
      "type": "side_by_side",
      "name": "side_by_side",
      "settings": [
        {
          "type": "image_picker",
          "id": "image-left",
          "label": "Image-left"
        },
        {
          "type": "image_picker",
          "id": "image-right",
          "label": "Image-right"
        },
        {
          "type": "select",
          "id": "layout",
          "label": "Layout",
          "default": "left",
          "options": [
            {
              "value": "left",
              "label": "Image on left"
            },
            {
              "value": "right",
              "label": "Image on right"
            }
          ]
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Side by Side Engineering "
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Pair text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "Text alignment",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "left"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    },

Answer 1

所有图片都必须包含img_url，以便它们获取图片本身的 CDN 路径。

此外，您必须以block.settings.image 而不是settings.block.image 的方式定位块图像。

所以你的代码应该是{{ block.settings.image-left | img_url: '1024x' }} 或者你喜欢的大小。