Vue - 组件背景图片 url 错误

【问题标题】：Vue - component background image url errorVue - 组件背景图片 url 错误
【发布时间】：2019-12-17 03:43:45
【问题描述】：

我调用设置背景图片到组件的代码：

style() {
  return {
    "background-image": `url(${require(`../../../assets/images/${this
      .last_result}.png`)})`
  };
},

正确的网址应该是

../../../assets/images/AR.png

但是控制台显示了 url 的错误，它变成了调用

/assets/images/AR0.2514806280000456da85c5fNaNpng

我找不到问题所在。有什么帮助吗？

【问题讨论】：

【解决方案1】：

你可以如下使用它。

style() {
  return {
    "background-image": `url(${require(`@/assets/images/${this
      .last_result}.png`)})`
  };
},

尝试使用绝对路径。

如果您的 assets 文件夹存在于 src/assets/images/ 中，那么您的绝对路径将是 @/assets/images/。

如果您想使用相对路径，请参阅当前组件中的 ../../../assets/images/ 路径。

希望对你有帮助。

【讨论】：