图片无法显示问题总结

时间:2025-03-17 19:56:59

1。data数据里的写法:

js里的应该是要写成 url: require('../../assets/workbench/')
如:

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Yrrrrrrrf对p',
      visible:false,
      show2:true,
      list:[
        {'pic':'01','src':require('../assets/detail/')},
        {'pic':'02','src':require('../assets/detail/')},
        {'pic':'03','src':require('../assets/detail/')}
      ]
    }
  }
}
</script>

//html:

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

.

其他情况,图片无法处理:引入第三方插件库,比如swiper,,用require会报错。而导致build项目上线,图片无法加载

则将图片文件放到static目录下。图片文件引入。写法:

swiperList:[
  {'pic':'01','src':'static/img/'},
  {'pic':'02','src':'static/img/'},
  {'pic':'03','src':'static/img/'}
],

这里路径从写起。而非引用图片的组件页面。

 3.配置方案:

build目录下找到中的({}),里面添加

publicPath: '../../'

这个属性就完美解决了