最近在修改vue前端项目时，之前图片引用本地的base64数据，是能正常显示的，后台修改为引用外部网络图片文件时，却导致不能正常显示。查看原来是图片加了 crossOrigin="anonymous"，例如 <img :src="element.value" crossOrigin="anonymous" style="width:100%;height:100%;" />。结果去掉后引用的网络图片就能正常显示了。

crossOrigin="anonymous"是什么意思

crossorigin 属性用于定义是否支持 CORS 请求。从另一个域或第三方服务器获取资源时。它包括音频等资源。视频、图片。链接和脚本。它用于处理 CORS 请求，检查是否允许共享来自其他域的资源是安全的。

用法：用于<audio>、<video>、<link>、<img>、<script>等很多元素。

也就是说如果用了 crossOrigin="anonymous" 表示是想跨域获取这张图片，但是跨域获取时需要服务器端支持，也就是请求返回头部要有：Access-Control-Allow-Origin:*。当然你不用跨域也是可以的。

跨域图片能正常裁剪（图片未转化成base64），应该满足三个条件：

1、img元素中设置crossorigin属性

2、图片允许跨域，设置响应头Access-Control-Allow-Origin

3、使用js方式请求图片资源, 需要避免使用缓存，设置url后加上时间戳，或者http头设置Cache-Control为no-cache