使用fetch与createObjectURL将图片链接重新转化可解决
直接上源码例子:
html部分代码
<!--预览图片-->
<!--file是包含fileType,fileName,fileUrl的文件,使用者根据实际调整-->
<el-button size="mini" type="primary" @click="previewImg(url)">预览</el-button>
<div v-show="previewSrcList.length">
<el-image
ref="previewImage"
style="width: 0; height: 0"
:preview-src-list="previewSrcList"
/>
</div>
script部分代码
data() {
return {
url:‘https:../0000/2023/09/a6e2cef750ad4d67b09e14b09bc6df77.png?Expires=1696912598&OSSAccessKeyId=LTAI4GHZtSqUyVCZ7wVjG6UA&Signature=9JwseFLxtowChVVGhrj11E0v%2FU8%3D’//使用私有方式上传图片得到的路径例子,安全问题 前面的域名隐藏了,使用者根据实际调整
previewSrcList: [],
}
},
methods: {
/** 预览图片 */
async previewImg(url) {
const res = await fetch(url)
const blobStream = await res.blob()
this.previewSrcList = [window.URL.createObjectURL(blobStream)]
this.$nextTick(() => {
this.$refs.previewImage.clickHandler()
})
}
}