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

【问题标题】：Set background image in v-for using Vue.js使用 Vue.js 在 v-for 中设置背景图片
【发布时间】：2020-06-26 21:35:32
【问题描述】：

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

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

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

【问题讨论】：

item.img 中有什么内容？是文件名，如men.jpg，还是文件路径，如../../assets.men.jog？
如果您还可以发布不起作用的代码，它可能会提供信息。仅从描述中很难确定您在做什么。
item.img 是文件路径，和require中写的一样
${} 适用于“模板字符串”（你把它放在regulrar中），但在这种情况下你不需要它：:style="{'background-image': 'url(' + require(item.img) + ')'}"
@artanik require 的原因是 Webpack 捆绑了 Vue 资源并用哈希重命名它们，所以 CSS 会指向一个不存在的图像名称，否则

标签： javascript css vue.js webpack vuejs2

【解决方案1】：

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

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

或

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

或

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

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

【讨论】：

谢谢，但我已经绑定了这些选项。 Vue 总是因“错误：找不到模块 '../../assets/picture.jpg'”而崩溃...
它们都有效，保证，除非你的路径是错误的。您完全确定您已经尝试过'' + item.img 吗？如果您尝试使用 @，您将不会收到该崩溃消息...
非常感谢， :style="{'background-image': 'url(' + require('@/assets/' + item.img) + ')'}" 有效！！！