1. 程式人生 > >vue.js圖片無法顯示問題總結

vue.js圖片無法顯示問題總結

1。data資料裡的寫法:

js裡的應該是要寫成 url: require('../../assets/workbench/1.png') 如:
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Yrrrrrrrf對p',
      visible:false,
      show2:true,
      list:[
        {'pic':'01','src':require('../assets/detail/1.jpg')},
        {'pic':'02','src':require('../assets/detail/2.jpg')},
        {'pic':'03','src':require('../assets/detail/3.jpg')}
      ]
    }
  }
}
</script>

//html:

<el-carousel-item v-for="item in list" :key="item.pic">
  <img :src="item.src" alt=""> 
</el-carousel-item>

.

其他情況,圖片無法處理:引入第三方外掛庫,比如swiper,,用require會報錯。而導致build專案上線,圖片無法載入

則將圖片檔案放到static目錄下。圖片檔案引入。寫法:

swiperList:[
  {'pic':'01','src':'static/img/1.jpg'},
{'pic':'02','src':'static/img/2.jpg'},
{'pic':'03','src':'static/img/3.jpg'}
],
這裡路徑從index.html寫起。而非引用圖片的元件頁面。

 3.配置方案:

build目錄下找到utils.js中的ExtractTextPlugin.extract({}),裡面新增

publicPath: '../../'

這個屬性就完美解決了