鍍金池/ 問答/HTML/ vue-cli中es6找不到本地資源？

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

我在項(xiàng)目中使用了一個(gè)vue的輪播插件vue-concise-slider，但初始化的時(shí)候找不到圖片

目錄結(jié)構(gòu)
圖片描述

.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,//當(dāng)前頁碼
            autoplay:2500,//自動(dòng)滾動(dòng)[ms]
            loop:true,//循環(huán)滾動(dòng)
            slidesToScroll:1,//每次滑動(dòng)項(xiàng)數(shù)
        },

        
    }
},

找不到資源
圖片描述

回答
編輯回答
巫婆

你的圖片資源它沒法解析呀，把樣式放在單獨(dú)的style標(biāo)簽里面

2017年1月3日 08:45
編輯回答
毀與悔

在創(chuàng)建vue實(shí)例之前引入圖片，再在data里面去使用，就可以了

2017年4月10日 04:25
編輯回答
避風(fēng)港

用 require 引用圖片，類似這樣：

  computed: {
    styleObj () {
      return {
        'background': `url(${require(`../assets/${this.type}.png`)}) center center / 70% 70% no-repeat`
      }
    }
  }
2017年7月22日 15:59
編輯回答
蔚藍(lán)色

還有一種方法，扔static（新版的是public）里，然后絕對路徑去引。所有在瀏覽器才開始跑的邏輯里的資源都這么引。

2017年7月12日 11:57