vue.js圖片無法顯示問題總結
阿新 • • 發佈:2019-02-13
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: '../../'
這個屬性就完美解決了