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

Question

我正在尝试使用架构和 Shopify liquid 在 Shopify 中添加新块。我已经添加了预期 add/import 左侧图像和右侧图像的模式 side.I 已经创建了动态块来显示两个图像。当我添加我的架构时，我能够看到用于添加图像的图像富文本框，但是当我添加图像时，我得到的是损坏的图像，当我在浏览器中检查它们时，我只得到 <img src=/>.I非常接近但缺少某些东西 here.Is <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 在富文本框中添加图片显示添加后损坏的图片

Shopify Adding Image in Rich text box shows broken image after adding

schema

liquid

shopify