Shopify主题配置未上传图片时如何隐藏默认占位图？

核心逻辑 #

通过Liquid条件判断控制DOM渲染：仅当对应图片配置项有上传内容时，才输出图片容器及img标签，未上传时不生成相关代码，从根源上避免默认占位图出现。
现有Schema配置无需调整，仅修改HTML部分的Liquid代码即可。

调整后的完整HTML代码 #

<div class="Images">
  {% if section.settings.image1 %}
  <div class="image1">
    <img src="{{section.settings.image1 | img_url: '120x120'}}" alt="">
  </div>
  {% endif %}

  {% if section.settings.image2 %}
  <div class="image2">
    <img src="{{section.settings.image2 | img_url: '120x120'}}" alt="">
  </div>
  {% endif %}

  {% if section.settings.image3 %}
  <div class="image3">
    <img src="{{section.settings.image3 | img_url: '120x120'}}" alt="">
  </div>
  {% endif %}

  {% if section.settings.image4 %}
  <div class="image4">
    <img src="{{section.settings.image4 | img_url: '120x120'}}" alt="">
  </div>
  {% endif %}

  {% if section.settings.image5 %}
  <div class="image5">
    <img src="{{section.settings.image5 | img_url: '120x120'}}" alt="">
  </div>
  {% endif %}

  {% if section.settings.image6 %}
  <div class="image6">
    <img src="{{section.settings.image6 | img_url: '120x120'}}" alt="">
  </div>
  {% endif %}
</div>

可选简化方案 #

如果后续需要调整图片数量，可通过循环简化重复代码，效果和上述代码完全一致：

<div class="Images">
  {% for i in (1..6) %}
    {% assign current_image = section.settings['image' | append: i] %}
    {% if current_image %}
    <div class="image{{i}}">
      <img src="{{current_image | img_url: '120x120'}}" alt="">
    </div>
    {% endif %}
  {% endfor %}
</div>

内容的提问来源于stack exchange，提问作者SK111