更改v-for中的元素背景图像

Question

我有一个v-for，它读取不同的.md文件，这些文件的前端具有图像属性。

我试图更改div的background-image，但它必须读取从frontmatter文件中获取的url。

这是代码：

<div v-for="item in projectsList" class="li" >
<div style="background-image: url(https://i.pinimg.com/originals/4f/c4/92/4fc49228a940e41435b3796c18fc2346.jpg)">
<a :href="item.path" class="li">
<span>{{ item.title }}</span>                       
</a>
</div>
</div>

现在的问题在于更改style:"background-image: url(<URL>)属性。

我可以通过item.frontmatter.image、访问图像

我读到了这篇文章，所以我试着做了一个例子，只是为了测试目的，我试着通过Data函数提供图像，但要注意的是，Url是未定义的，所以我需要一种不同的方式来将基于Url的图像提供给背景。

:style:"{'background-image': url( imageURL )}"
data: function () {
return {
imageURL: 'https://i.pinimg.com/originals/4f/c4/92/4fc49228a940e41435b3796c18fc2346.jpg' 
}
},

Answer 1

您应该能够这样做：

<div v-for="item in projectsList" class="li" >
<div :style="{ 'background-image': `url(${item.frontmatter.image})` }">
<a :href="item.path" class="li">
<span>{{ item.title }}</span>
</a>
</div>
</div>

我认为这里不需要数据功能。