vue-cli中es6找不到本地资源？

Question

我在项目中使用了一个vue的轮播插件vue-concise-slider，但初始化的时候找不到图片

目录结构

.vue

<v-slider :pages="pages" :sliderinit="sliderinit">
    <!-- slot  -->
</v-slider>


data: function () {
    return {
        pages: [
            {

                style: {
                    background: 'url(./images/banner.png)',
                    'background-size': '100% 100%',
                    width: '100%',
                    height: '100%'
                }
            },

            {

                style: {
                    background: 'url(./images/banner.png)',
                    'background-size': '100% 100%',
                    width: '100%',
                    height: '100%'
                }
            }
        ],

        sliderinit: {
            currentPage: 0,//当前页码
            autoplay:2500,//自动滚动[ms]
            loop:true,//循环滚动
            slidesToScroll:1,//每次滑动项数
        },

        
    }
},

找不到资源

Answer 1

用 require 引用图片，类似这样：

  computed: {
    styleObj () {
      return {
        'background': `url(${require(`../assets/${this.type}.png`)}) center center / 70% 70% no-repeat`
      }
    }
  }

Answer 2

你的图片资源它没法解析呀，把样式放在单独的style标签里面

Answer 3

在创建vue实例之前引入图片，再在data里面去使用，就可以了

Answer 4

还有一种方法，扔static（新版的是public）里，然后绝对路径去引。所有在浏览器才开始跑的逻辑里的资源都这么引。