viewerjs图片url更新后视图不更新

<template>
  <Drawer
    v-model="visible"
    title="图片预览"
    placement="right"
    closable
    :mask="false"
    width="45%"
  >
    <template v-for="(item, index) in imgList">
      <div
        :key="index"
        style="display: flex"
      >
        <div class="title">
          {{ item.name }}
        </div>
        <div class="image-wrapper">
          <img
            :id="item.url + index"
            :src="item.url"
          >
        </div>
      </div>
    </template>
  </Drawer>
</template>

<script>
import { Drawer } from 'view-design';
import Viewer from 'viewerjs';

export default {
  name: 'ImageViewer',
  components: {
    Drawer,
  },
  props: {
    imgList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      visible: false,
      imageObject: {},
    };
  },
  mounted() {
    // this.imgList.forEach((item, index) => {
    //   const imgDOM = document.getElementById(item.url + index);
    //   if (imgDOM) {
    //     const viewer = new Viewer(imgDOM, {
    //       inline: true,
    //       navbar: false,
    //       title: false,
    //       toolbar: {
    //         zoomIn: {
    //           show: 1,
    //           size: 'large',
    //         },
    //         zoomOut: {
    //           show: 1,
    //           size: 'large',
    //         },
    //         oneToOne: {
    //           show: 1,
    //           size: 'large',
    //         },
    //         reset: {
    //           show: 1,
    //           size: 'large',
    //         },
    //         prev: 0,
    //         play: {
    //           show: 0,
    //         },
    //         next: 0,
    //         rotateLeft: {
    //           show: 1,
    //           size: 'large',
    //         },
    //         rotateRight: {
    //           show: 1,
    //           size: 'large',
    //         },
    //         flipHorizontal: {
    //           show: 1,
    //           size: 'large',
    //         },
    //         flipVertical: {
    //           show: 1,
    //           size: 'large',
    //         },
    //       },
    //       viewed() {
    //         viewer.zoomTo(0.4);
    //       },
    //     });
    //   }
    // });
  },
  methods: {
    show() {
      this.visible = true;
      this.imgList.forEach((item, index) => {
        const imgDOM = document.getElementById(item.url + index);
        if (imgDOM) {
          const viewerName = `viewer${index}`;
          if (this.imageObject?.[viewerName] !== null) {
            this.imageObject?.[viewerName]?.destroy(); // 更新视图前需要先销毁之前的视图，否则更新无效
          } // 给到具体的viewer值
          this.imageObject[viewerName] = new Viewer(imgDOM, {
            inline: true,
            movable: true,
            navbar: false,
            title: false,
            toolbar: {
              zoomIn: {
                show: 1,
                size: 'large',
              },
              zoomOut: {
                show: 1,
                size: 'large',
              },
              oneToOne: {
                show: 1,
                size: 'large',
              },
              reset: {
                show: 1,
                size: 'large',
              },
              prev: 0,
              play: {
                show: 0,
              },
              next: 0,
              rotateLeft: {
                show: 1,
                size: 'large',
              },
              rotateRight: {
                show: 1,
                size: 'large',
              },
              flipHorizontal: {
                show: 1,
                size: 'large',
              },
              flipVertical: {
                show: 1,
                size: 'large',
              },
            },
            viewed() {
              this.viewer.zoomTo(0.5);
            },
            show() {
              this.viewer.update(); // 动态数据，更新视图
            },
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
  width: 8em;
  display: flex;
  justify-content: center;
  //align-items: center;
  margin-top: 8px;
  margin-left: -16px;
}

.image-wrapper {
  width: 100%;
  margin-bottom: 8px;

  & img {
    height: 30vh;
  }
}

/deep/ .viewer-footer {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  left: 90%;

  & .viewer-toolbar {
    display: flex;
    height: 100%;
    align-items: center;

    & ul {
      display: flex;
      flex-direction: column;
      position: absolute;
      right: 8px;
      height: 250px;
      justify-content: space-between;
    }
  }
}
</style>

show() {
this.viewer.update(); // 动态数据，更新视图
},
show方法更新视图前需要先把之前的视图销毁,如果是数组就要根据里面每项/某项进行销毁