小书go
2018-03-12 01:25
采纳率: 80%
浏览 15.4k

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条回答 默认 最新

  • Elliotbaird 2018-03-16 09:28
    已采纳

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

    点赞 9 打赏 评论
  • qq_41019462 2018-03-18 13:56

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

    点赞 1 打赏 评论
  • qq_40235204 2018-03-12 01:31

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

    点赞 打赏 评论
  • qq_40235204 2018-03-12 01:31

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

    点赞 打赏 评论
  • 小书go 2018-03-12 02:13

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

    点赞 打赏 评论
  • 密缘之友 2018-03-12 02:46

    路径调用问题检测下。

    点赞 打赏 评论
  • 算不算码农 2018-03-12 02:53

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

    点赞 打赏 评论
  • Elliotbaird 2018-03-16 09:31

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

    点赞 打赏 评论
  • countofdane 2018-07-22 04:09
    这样就可以了
    
        <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>
    
    点赞 打赏 评论

相关推荐 更多相似问题