vue.js图片无法显示问题总结

milli236

于 2017-09-24 02:53:22 发布

阅读量1.4w

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.csdn.net/milli236/article/details/78074764

版权

本文总结了Vue.js中图片无法显示的问题，包括data数据里写法导致的图片不显示，以及使用第三方插件如swiper时遇到的require报错。解决办法是将图片放在static目录下，并通过相对路径引用，或者在build/utils.js的ExtractTextPlugin.extract()中添加publicPath: '../../'来修正图片路径。

摘要由CSDN通过智能技术生成

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-it