时间戳

首页 > 解决方案 > 使用 Vue.js 在 v-for 中设置背景图片

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

问题描述

我正在尝试style使用requireVue.js 和v-for.

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

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

标签： javascriptcssvue.jswebpackvuejs2

解决方案

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

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

或者

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

或者

如果您只想使用没有路径的图像中的文件名，您可以这样做：

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

推荐阅读