如何将Schema上传的图片设为Shopify主题中的CSS背景？

你当前的代码问题在于直接调用了图片对象，而没有获取图片的实际URL。以下是具体实现步骤：

• 确认Schema中的图片字段配置
  首先确保你的section blocks里的图片字段是image_picker类型，示例配置如下：

  {
    "type": "image_picker",
    "id": "image",
    "label": "背景图片"
  }
  

• 修改背景图片调用代码
  section.blocks[0].settings.image返回的是图片对象，需要提取它的URL才能作为背景图使用，有两种常用方式：

  1. 直接调用图片的src属性：

     <div class="collection-card" style="background-image: url('{{ section.blocks[0].settings.image.src }}')"></div>
     

  2. 使用Shopify的img_url过滤器指定图片尺寸（更灵活，适合响应式场景）：

     <div class="collection-card" style="background-image: url('{{ section.blocks[0].settings.image | img_url: '1024x1024' }}')"></div>
     

• 优化背景样式（可选）
  为了让背景图显示效果更好，建议在CSS中添加基础样式：

  .collection-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 300px;
    height: 200px;
  }
  

• 遍历多个blocks（如果需要）
  若你需要渲染多个卡片，不要固定索引[0]，改用循环遍历所有blocks：

  {% for block in section.blocks %}
    <div class="collection-card" style="background-image: url('{{ block.settings.image.src }}')"></div>
  {% endfor %}
  

内容的提问来源于stack exchange，提问作者Hyun Hae Park