el-image使用预览属性preview-src-list元素显示在父组件，预览图片出现闪烁的问题

elementUI组件中使用el-image的预览属性preview-src-list时，预览图片会出现图片闪烁的问题。
大致的原因是：如果父元素有使用到 transform, perspective 或 filter 属性，且设置的值不为 none 时，fixed 元素就会相对于父元素来进行定位，而预览图片要相对于浏览器进行定位的原因导致。
解决：

• idea one：若样式可以进行更改，更改容器定位方式，不使用transform进行偏移，去掉父元素的transform。
• idea two：若样式不便于更改，只能考虑通过js去更改 el-image-viewer__wrapper 在dom中的位置。
  如果项目使用的是vue2版本的，可以使用一下js方法进行改写，或者使用第三方插件，比如portal-vue，同时要改写el-image，插件具体使用自行查询。

this.$nextTick(() => {
		const body = document.querySelector('body');
     let imageViewer=document.getElementByClassName('.el-image-viewer__wrapper');
		body.append(imageViewer);
     imageViewer.remove();
})

若你使用的是vue3，vue3的新特性中有一项 Teleport 标签，它是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。
or 同时element基于vue3的plus版本中，新增了一项新属性append-to-body：image-viewer 是否插入至 body 元素上。 嵌套的父元素属性会发生修改时应该将此属性设置为 true。

<teleport to="#modal-wrapper">
    <el-image style="width: 100px; height: 100px" :src="url" :fit="fit" :preview-src-list="srcList" />
</teleport>

<el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
      :append-to-body='true'
/>