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: '../../'
这个属性就完美解决了