资料来源：https://itcgq.blog.csdn.net/article/details/79978896

https://blog.csdn.net/weixin_44138647/article/details/112407737

图片不能站外引用这个问题所导致的。原因是因为设置了HTTP Referer，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，利用Referer是可以防止图片盗链的，所以这就是报错的原因。

解决方案

一、使用images.weserv.nl方案

• 直接在原图链接前拼接https://images.weserv.nl/?url=
• 例如：

https://images.weserv.nl/?url=https://www.baidu.com/img.jpg

二、使用no-referrer方案

• 这种方案不仅针对图片的防盗链,还可以是其他标签
• 在前端页面头部添加一个meta

<meta name="referrer" content="no-referrer" />

• a标签的referrer

<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>

• img/image标签的referrer

<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>
<image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>

• 如果我们是访问的gif图片,使用第一种方案是没有gif效果的,只能显示静态图片.这个时候推荐大家使用第二种.亲测可以完美展示gif效果.
• 经过试验,不是多有gif网站都支持第二种方式,还是有些会失败.请大家自行试验.如果有更好的方法可以一起交流