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

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

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

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

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

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

路径调用问题检测下。

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

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

这样就可以了

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