javascript - 使用 Vue.js 在 v-for 中设置背景图片

Question

我正在尝试使用 Vue.js 和 v-for 中的 require 将 CSS 背景图像添加到动态 style block 中。

  <div v-for='item of this.$store.state.offers'
       :key="item.id"
       :style="{'background-image': 'url(' + require('../../assets/men.jpg') + ')'}"
  >

问题是上面的代码静态工作，但如果我将其替换为 require 括号中的 ${item.img} ，它就会崩溃。有办法吗？

Answer 1

假设您的每个图像都有静态编写的路径，您可以这样做:

:style="{'background-image': 'url(' + require(`${item.img}`) + ')'}"

或者

:style="{'background-image': 'url(' + require('' + item.img) + ')'}"

或者

如果您只想使用图像中的文件名而不使用路径，您可以这样做:

:style="{'background-image': 'url(' + require('@/assets/' + item.img) + ')'}"