vue3 圖片預覽

template部分:

<el-button
  class="set-other-btn2"
  size="small"
  @click="handlePreview(row.attachmentName, row.downUri)"
  ><el-icon><PictureFilled /></el-icon>預覽</el-button
>
<!-- 圖片預覽 -->
<el-image-viewer
  v-if="showImagePreview"
  :zoom-rate="1.2"
  @close="closePreview"
  :url-list="imgPreviewList"
/>

setup部分:

const imgPreviewList = ref<any>([]);
const showImagePreview = ref(false);
const currentBase64FileData = reactive({
  base64: "",
  name: "",
});

const closePreview = () => {
  imgPreviewList.value = [];
  showImagePreview.value = false;
};

const handlePreview = async (attachmentName: any, downUri: any) => {
  //currentBase64FileData.base64 = "data:image/png;base64," + downUri;
  currentBase64FileData.base64 = downUri;
  currentBase64FileData.name = attachmentName;
  showImagePreview.value = true;
  // 下面數組裏可以放一個url，如'https://raw.githubusercontent.com/JACK-ZHANG-coming/map-depot/master/2023image-20231120091054028.png'，我這裏放的是一個base64數據，也可以用來顯示圖片
  imgPreviewList.value = [currentBase64FileData.base64];
};

效果圖: