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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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: '../../'

这个属性就完美解决了

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值