element-plus的el-image跨域

一、文章参考

1. element-plus的el-image跨域踩坑记录
2. [Component] [image] 2.5.1版本 el-image组件存在跨域问题，使用原生image组件正常
3. [Component] [image] Image 跨域问题

二、问题描述

在项目开发中，使用element-plus UI框架的 el-image 控件，目的是为了查看图片详情（原始图片），由于图片是存储在对象服务器上，控制台报错，提示跨域

三、解决办法

方法一：后端对图片做代理，将跨域变为相同的服务器即可

方法二：前端处理，解决组件的bug

1. 可将element-plus升到2.5.3

{
	"element-plus": "2.5.3",
}

2. 添加 :crossorigin=“null” 属性

<el-image
	style="width: 100%; height: 100%"
	:src="item.picUrl"
	:zoom-rate="1.2"
	:max-scale="7"
	:min-scale="0.2"
	:preview-src-list="[item.picUrl]"
	:initial-index="0"
	fit="contain"
	:crossorigin="null"
>
	<template #error>
	  <div class="image-slot">
		<el-icon><Picture /></el-icon>
	  </div>
	</template>
</el-image>