Question

我正在尝试使用架构和Shopify Liquid在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' }}或您希望的大小。

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

1 个答案: