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也一直能得到，但是图片打死获取不到，不涉及动态资源图片就是本地的几张图片图片说明

vue.js css element-ui js

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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了！
我要提问
立即提问
相关内容推荐