el-image图片加载慢时，加个loading

<template>
  <div>
    <el-button type="primary" @click="btn()">加载图片</el-button>
    <el-dialog width="600px" class="dialog" title="查看结果图片" :visible.sync="dialogVisible" :close-on-click-modal='false'>
      <div class="dialog-main">
        <div>图片1</div>
        <span v-if="!fitFilePath" class="m-l-10">暂无数据</span>
        <br>
        <el-image v-if="fitFilePath" class="inner-img" v-loading="imgLoadingList[0]" @load="(e) => imgLoad(e, 0)" :src="fitFilePath" :preview-src-list='[fitFilePath]'></el-image>

        <div>图片2</div>
        <span v-if="!hbFilePath" class="m-l-10">暂无数据</span>
        <br>
        <el-image v-if="hbFilePath" class="inner-img" v-loading="imgLoadingList[1]" @load="(e) => imgLoad(e, 1)" :src="hbFilePath" :preview-src-list='[hbFilePath]'></el-image>

        <div>图片3</div>
        <span v-if="!hpFilePath" class="m-l-10">暂无数据</span>
        <br>
        <el-image v-if="hpFilePath" class="inner-img" v-loading="imgLoadingList[2]" @load="(e) => imgLoad(e, 2)" :src="hpFilePath" :preview-src-list='[hpFilePath]'></el-image>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      fitFilePath: 'http://10.18.22.5:5127/api/oss/download/localFile?filePath=/cancer/20241223/7e2f9427-4e6e-4b75-a921-886fbb220cc0-20241223150746.jpg',
      hbFilePath: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
      hpFilePath: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
      imgLoadingList: []
    }
  },
  methods: {
    btn () {
      this.dialogVisible = true
      if (this.fitFilePath) {
        this.imgLoadingList.push(true)
      }
      if (this.hbFilePath) {
        this.imgLoadingList.push(true)
      }
      if (this.hpFilePath) {
        this.imgLoadingList.push(true)
      }
    },
    imgLoad (e, index) {
      this.$set(this.imgLoadingList, index, false)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-image {
  width: 540px;
  height: 300px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>