解决图片的防盗链导致图片显示「适合所有的防盗链图片、例如公众号」

AI文摘 此内容由AI根据文章内容自动生成

AI Summary

使用办法

应用时候用

<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300">

img 中添加

referrerPolicy="no-referrer"

解决的方案

1. 使用后台的预下载（把图片下载下来放到服务器下）
   • 缺点： 占用服务器的空间，访问速度没有豆瓣提供的稳点。有些网站是静态的如 hexo 就无法实现。
2. 第三方代理
   • 缺点： 不稳点，第三方代理可能在国内访问不稳定，在国内没有好的推荐。也可以自己做一个代理，之前有人用 GO 做过一个。

下面有一个，url 后面填上豆瓣 Api 返回的图片地址

<img src=”https://images.weserv.nl/?url=https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544866651.jpg" \/>1

3. 还有一种比较友好和奢侈的，上传 CDN 调用 CDN 的地址，
   缺点： 有点奢侈，因为所有图片都存到 CND 占用大量空间，CND 可能需要钱购买，CND 服务商提供图片上传的 API
4. 删除 Header 中的 Referrer
   content 有四个值可以选择 never,always,origin,default 这是来自于 whatwg 标准，浏览器对他的支持还是很好的。MDN 标准，还多了一个 no-referrer

<meta name="referrer" content="never">

6. 添加 ReferrerPolicy 属性
   添加 meta 标签相当于对文档中的所有链接都取消了 referrer，
   而R eferrerPolicy 则更精确的指定了某一个资源的referrer策略。
   关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer，如下编写即可:

<img src="xxxx.jpg" referrerPolicy="no-referrer" />

推荐办法

Github 的好项目：https://github.com/weserv/images

官网：https://wsrv.nl/

<!-- wsrv.nl/lichtenstein.jpg -->
<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300">