vue解决微信防盗链接图片无法展示问题

vue解决微信防盗链接图片无法展示问题

1.需求背景

• 最近在vue项目的页面中使用到了微信公众号项目的图片，然后在另一个项目中引用时出现了防盗链接的提示，导致图片本身的内容无法展示。
  

解决方案

• 防盗链这个东西本质上其实也是为了在一定程度上保护知识产权，毕竟原创本来就是一键不容易的事。

• 其实如果只是针对某一张或少数几张图片，完全可以先将图片下载下来，然后再本地引用或者再上传到自己的服务器就解决了。

• 另外的简单的方案如下（如果只是针对某一张或有限的几张图片，那么推荐第一种；如果和作者一样图片在富文本中那么推荐第二种。）：

• // 这里用到的referer是用来防止 CORS（跨站请求伪造）的一种最常见及有效的方式。对于自身服务器，通过客户端发来的请求中带有的referer信息，可以判断该请求的来源。
  
  // 1.在要引用的图片标签上修改referrerPolicy属性：
  <img src="xxxx.jpg" referrerPolicy="no-referrer" />
      
  // 2.在根页面index.html文件新增标签：
  <meta name="referrer" content="never">
  
  

• 其他的方法如：在图片链接url上加上前缀http://read.html5.qq.com/image？src=forum&q=5&r=0&imgflag=7&imageUrl=也是可行的。

• 解决。