无法将图像添加到液体中的背景网址（shopify dev）

Question

所以我正在为客户建立一个网站，这是我第一次使用液体。这些要求与黎明主题并没有太大偏离，所以我只是对其进行编辑以满足她的需求。基本上我现在陷入困境的是通过迭代图像列表来动态设置 div 的多个

background-image

。我有一个元对象“活动图像”，它是图像列表和

collections

下的元字段，引用它，简称为“图像”(

collection.metafields.custom.images

)。我的代码如下所示：

{% assign images = collection.metafields.custom.images.value %}

...

.homebg {
    height: 3000px;
    background:
      {% for file_link in images.campaign_images.value %}
      url("
        {{ file_link | image_url }}
        ")
        {% unless forloop.last %}
          ,
          {% endunless %} 
      {% endfor %}
    no-repeat center center;
    background-size: cover;
  }

它不输出任何东西。

我尝试直接访问元对象但无济于事（我只得到无图像网址）。我对输出的期望是这样的：

.homebg {
    height: 3000px;
    background: url("image1.png"), url("image2.png"), url("image3.png") no-repeat center center;
    background-size: cover;
  }

Answer 1

您可以检查这个解决方案，它工作正常。

{% assign images = collection.metafields.custom.images.value %}

{% if array_of_image_objects %}
 {% for img in images %}
  <img src="{{ img | image_url }}">
 {% endfor %}
{% endif %}

我认为我们无法使用 CSS 在背景图像中传递多个图像。另外你的for循环是错误的，这就是为什么没有获取图像URL。你可以根据你的代码检查下面的解决方案。

{% assign images = collection.metafields.custom.images.value %}

...

.homebg {
    height: 3000px;
    background:
      {% for file_link in images %}
      url("
        {{ file_link | image_url }}
        ")
        {% unless forloop.last %}
          ,
          {% endunless %} 
      {% endfor %}
    no-repeat center center;
    background-size: cover;
  }