vue-cli中的background-image路径问题

Question

我在项目的组件中把样式写在计算属性中 我希望动态设置样式的background-image 但是在过程中遇到了些问题， 我要如何解决

 data () {
    return {
      tab_active: 'ma',
      bgUrl: '@/assets/images/stamps/icon-auditing.png'
    }
  },
  computed: {
    imgStyle () {
      if (this.bgUrl) {
        var img = require(this.bgUrl) //如果this.bgUrl换成'@/assets/images/stamps/icon-auditing.png'就没问题 但我需要动态设置
        var url = `url(${img})` 
        console.log(url)
        return {
          'background-image': url,
          'background-position': 'center center',
          'background-size': 'auto 100%',
          'background-repeat': 'no-repeat'
        }
      }
    },
 }   

报错如下

问题已解决 把资源放到static文件夹下 访问时用绝对路径 /static即指向该文件夹 引用时无需require 直接background-image: url('address')即可

Answer 1

楼主，你好！如果这些图片都是放在本地的，可以都放在 public 文件夹，这里的资源不经过 webpack 做处理的。所以图片路径是固定的，所需的时候，只需换下不同的文件名即可。

---

如有帮助，麻烦点击下采纳，谢谢~

Answer 2

所以为什么不写在css里?