To sum up, there are two ways to solve this problem:

  • Use the images.weserv.nl scheme
  • Use the no-referrer scheme

images.weserv.nl

  • Only static images can be displayed
getImage(url){
  console.log(url);
  // Pass in the current image link, return an unrestricted path
  if(url ! = =undefined) {return url.replace(/^(http)[s]*(\:\/\/)/.'https://images.weserv.nl/? url='); }} Upload the image path directly, instead of the original URL HTTP/HTTPS. Or simply prefix the image URL with HTTPS://images.weserv.nl/? url=Such as: HTTPS://images.weserv.nl/? url=http://img.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpgHTTP of the original image:// can be omitted (same result as getImage above)
https://images.weserv.nl/? url=mg.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpg
Copy the code

no-referrer

  • This scheme is not only for the anti-theft chain of pictures, but also for other labels.
  • Add a meta to the front page header
  • Small programs take this approach
  • GIF effect can be displayed
<meta name="referrer" content="no-referrer" />// referrer of a label<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>//img/image tag referrer<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>
<image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>
Copy the code