elementUI实现轮播加图片预览

<template>
  <div>
    <div v-if="imgList.length > 0">
      <el-carousel height="120px">
        <el-carousel-item
          v-for="(item,index1) in imgList"
          :key="index1"
          :autoplay="false"
        >
          <el-image
            style="width: 100%; height: 100%"
            :src="item"
            :preview-src-list="imgList"
          >
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div
      v-else
      class="item-card none-img"
    >
      暂无照片！
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AttributeTable',
    props: {
      imgList: {
        type: Array,
        default: () => {
          return [
                  'http://www.dituk.com/uploads/allimg/170614/1-1F614164P15c.jpg',
                  'http://img.mp.itc.cn/upload/20170523/341e377156ac47d39b356b589f3acc32_th.jpg',
          ]
        }
      }
    },
    data() {
      return {
        /*        imgList: [
                  'http://localhost:3000/static/img/login-background.bbdd7d12.png',
                  'http://localhost:3000/static/img/1.d9e9852f.jpg'
                ]*/
      }
    },
    methods:{

    }
  }
</script>

<style lang="scss" scoped>
  .item-card {
    height: 120px;
    width: 100%;
    cursor: pointer;
  }
  .none-img{
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dcdfe6;
  }
</style>

标签：http,轮播,img,elementUI,预览,jpg,3000,return,center
来源： https://www.cnblogs.com/yiliangmi/p/16517029.html