上午刚开始写代码就遇到一个问题，拿到后端返回的图片url,进行展示，结果展示不出来，报跨域问题，错误信息如下

Access to image at 'https://fanqier.cn/f/datashare/62bedc9da0428c677013e9d7?formId=6242c0c23bf21c667cdf6b6a' from origin 'http://localhost:10003' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
一看报错信息，很明显呀，跨域问题，直接让后端设置Access-Control-Allow-Origin解决，因为这是直接用url，也不是从服务器请求，后端也无法设置。。
所以开始着手于解决跨域问题，因为显示图片是直接img url
<img width={40} src={loadingimg} />
所以就查看文档，看看如何处理img跨域
 给img上设置crossorigin="anonymous"，然而设置之后还是不生效。难道要把图片转换成base64再展示？？
这时候后端说之前有这种跨域图片的展示你可以看看，一看代码，之前用的是iframe进行图片的展示，把iframe放入代码中，一刷新果然可以。
这时候感觉有点奇妙，iframe一般咱用于下载表格，展示pdf, 现在图片的跨域也可以轻松展示了，还是好好看看iframe的文档~~
官方解释如下：
HTML 内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。
所以iframe 标签承载了一个单独的嵌入的窗口，
页面上的每个<iframe>都需要增加内存和其他计算资源，这是因为每个浏览上下文都拥有完整的文档环境，所以在使用中需要注意会不会导致性能问题。
欢迎关注公众号：七月记录生活， 一起分享前端及生活乐趣~~