开发vue时在img标签中使用src属性引用图片后图片无法正常显示,但复制链接后能显示图片

解决:在public中的html中，header内加上:

referrer，一种引用策略，可以用来防止图片或视频被盗。它的原理是：http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名，来进行防盗链。如果没有设置referrer，那就可以直接绕过防盗链机制，直接使用或盗取。

[vue 网络图片访问不到，403的解决办法（详解）]

index.html中添加

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

原因：

防盗链的机制：
通过页面的referrer信息，判断访问者来源，是否本站点，然后对图片等请求作出相应

no-referrer：
1、整个 Referer 首部包含了当前请求页面的来源页面的地址，即表示当前页面是通过此来源页面里的链接进入的。
2、服务端一般使用 Referer 首部识别访问来源，可能会以此进行统计分析、日志记录以及缓存优化等。
3、首部会被移除。访问来源信息不随着请求一起发送。

隐藏请求体中标注来源referrer字段，referrer字段只能隐藏，不能定制，
这样服务器端的防盗链就无法检测

`<!DOCTYPE html>`

`<html lang=``"en"``>`

`<head>`

`    ``<meta charset=``"UTF-8"``>`

`    ``<link rel=``"icon"` `href=``"/favicon.ico"``/>`

`    ``<meta name=``"viewport"` `content=``"width=device-width, initial-scale=1.0"``>`

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

vue项目中网络图片无法显示

[vue 网络图片访问不到，403的解决办法（详解）]