泪水打湿猪脚饭发誓弄懂element-plus的el-image跨域问题

本文链接：https://blog.csdn.net/weixin_64193234/article/details/144825994

一、问题描述

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

二、代码：

el-image：

        <div>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(image, index) in PreviewBlog.images" :key="index">
              <h3 text="2xl" justify="center">
                <el-image :src="image"  alt="" style="height: 200px;width: 100%"/>
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>

原生image：

        <div>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(image, index) in PreviewBlog.images" :key="index">
              <h3 text="2xl" justify="center">
                <img :src="image"  alt="" style="height: 200px;width: 100%"/>
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>

三、结果

img标签的可以访问并没有出现跨域问题

而element-plus的el-image 出现跨域问题

控制台

四、解决

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

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

可将element-plus升到2.5.3及以上

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

方法三：添加 :crossorigin=“null” 属性（推荐）

        <div>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(image, index) in PreviewBlog.images" :key="index">
              <h3 text="2xl" justify="center">
                <el-image :src="image" :crossorigin="null" alt="" style="height: 200px;width: 100%"/>
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>