Vue.js 使用element-ui 做走马灯,图片一直显示不出来
 <template>
  <div  id="app" class="block">
    <span class="demonstration">Click 指示器触发</span>
    <el-carousel trigger="click" height="300px">
      <el-carousel-item v-for="(img,index) in imgList" :key="index">
        <img v-bind:src="img.url">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

代码一直都是拷贝官网的,url也一直能得到,但是图片打死获取不到,不涉及动态资源图片就是本地的几张图片图片说明

9个回答

写在data里面的路径只会当成一个字符串,当使用:src=""来绑定的时候不能达到预期的效果,解决的办法有url: require('.assert/1.jpm')手动把图片引入,否则配置的loader是不会根据图片路径把图片找出来

qzcsu
小书go 非常感谢,前端渣渣受教了! 按照你这个方式解决了
2 年多之前 回复
这样就可以了

    <template>
      <el-carousel :interval="4000" type="card" height="200px">
        <el-carousel-item v-for="item in card_img" :key="item">
          <!---->
          <img :src=item.url >
        </el-carousel-item>
      </el-carousel>
    </template>
weixin_42407652
寡人啊 谢谢分享,图片可以显示,但我的控制台报错了, 说key值赋值不是唯一的,换成item.url就好啦
12 个月之前 回复

路径错了。。 /assets/1.jpg

qzcsu
小书go 路径没错,看我评论
2 年多之前 回复

你写个延迟加载或者是方法试试。
mounted(){
this.onload();
},
methods:{
onload(){
this.imgList = [{url:'./assets/1.jpg'},{url:'./assets/2.jpg'}]
}
}
还是不好用的话 用个延迟试试

qzcsu
小书go 试了你这个方法还是图片不显示
2 年多之前 回复
qq_40235204
qq_40235204 setTimeout 或者 nextTick试试
2 年多之前 回复

路径没有错,我写成这样图片是可以显示了,每次一写在el-carousel-item标签里面图片就不能显示了
图片说明

weixin_45478077
weixin_45478077 imgList路径写成url: require('../assets/1.jpg')
5 个月之前 回复

路径调用问题检测下。

qzcsu
小书go 路径调用问题指的是?
2 年多之前 回复

可以切到谷歌Network先瞅一眼,是否属于图片资源获取失败(如果是,可以观察下路径是否被修改了)。
否就是代码问题了。先确认这个

写在data里面的路径只会当成一个字符串,当使用:src=""来绑定的时候不能达到预期的效果,解决的办法有url: require('.assert/1.jpm')手动把图片引入,否则配置的loader是不会根据图片路径把图片找出来的

图片说明应该把图片放在这个目录下

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问