Css 中间人：动态背景图像？

一些背景信息： 我刚开始学习middleman来建立我的投资组合。。我没有编程背景，所以请容忍我：-）

我有一个索引页面，其中列出了我的所有项目，如卡片，由json文件中的数据创建/填充。这是我用来为索引页上的每个项目创建卡片的循环：

<div class="row">
  <% data.projects.projects.each do |project| %>
    <div class="col-md-12">
      <h2>
        <%= project.title %>
      </h2>
      <div>
        <%= link_to 'View project', project.path, relative: true %>
      </div>
    </div>
  <% end %>
</div>

到目前为止，一切顺利

现在我想做的是为每张卡设置一个（唯一的）背景图像，我不太确定怎么做。在我看来，我可以采取两种方法：

1。为每张卡创建CSS规则，并在json的循环中设置类：

bg-img-1{背景图片：url（“img1.jpg”）；}

bg-img-2{背景图片：url（“img2.jpg”）；}

bg-img-3{背景图片：url（“img3.jpg”）；}

并在json文件中的每个项目中添加

{“bg-img”：“bg-img-x”}

然后在我的卡片创建循环中，将“bg img”添加到每张卡片的类中

2。在div上设置内联样式，并从json文件中插入img路径：

然而，这两种解决方案似乎都不完美/最优？ 对于解决方案#1，进行更改会变得单调乏味，因为我必须在几个地方进行更改，CSS和json文件

解决方案#2没有这个问题，但我不喜欢内联样式/将样式保存在不同的位置

那么还有其他的方法吗？或者我必须从中挑选一个来处理每一个的利弊

谢谢

溶液#2非常好，经常使用。背景的内联样式是一种标准做法

{
    "projects": [
        {"title": "One",
         "path": "/one.html"
       },
        {"title":"Two",
         "path": "/two.html"
       },
       {"title":"Three",
        "path": "/three.html"
      }
    ]
}