好久以前用 js 给网站写了个站外链接卡片，最近给它加上了 B 站链接的解析。写文章的时候只需要一条代码就可以将 B 站的链接变成链接卡片，就像这样：

因为想把卡片的背景做成渐变的效果，所以就用了 background 的 linear-gradient 样式。一开始直接从 B 站的 API 拿到视频的封面图就直接往 background 里面套，结果测试的时候发现 B 站的图床开了防盗链，没办法直接用。经过十几分钟的折腾，发现了两个奇奇怪怪的解决方法。

曲线救国法

众所周知，给 img 加上 referrerpolicy='no-referrer' 可以屏蔽掉 Referer 的发送，实现防 防盗链的效果，需要注意的是 referrerpolicy='no-referrer' 只支持 a、area、img、iframe、script、link 这几个元素，对于 div 就无能为力了。但是如果我们在页面先用带 referrerpolicy='no-referrer' 的 img 拿到图片，就可以在 div 的 background 中显示了，最后给 img 一个 hidden 属性就可以了。

<div style='background:url(https://i0.hdslb.com/bfs/archive/b73aec2f46bcaddee266b900d714b78f47e726d2.jpg);'>
    <img src="https://i0.hdslb.com/bfs/archive/b73aec2f46bcaddee266b900d714b78f47e726d2.jpg" referrerpolicy="no-referrer" hidden>
</div>

打开控制台，可以看到页面只加载了一个资源，div 的图片应该是直接拿了 img 一开始请求的图片

下面是用这种方法实现的效果（下面的例子因为主题问题把 img 放 div 里会额外加上一个 p 标签，导致卡片变形，所以把 img 放在了 div 外面）

NTR法

通过第三方的图像缓存服务来解决防盗链问题，这里用的是 https://images.weserv.nl 这个网站的服务。使用方法非常简单，只需要在 https://images.weserv.nl/?url= 后加上防盗链的图片就好了。

个人比较推荐使用这种方法，一来他们的服务是免费的而且图片加载速度非常的快，二来这个网站提供了图片压缩，根据信息熵或者「亮度频率最高、颜色饱和度和肤色占比最多」的区域进行裁剪等后期处理，所以最后也采用了这个方法去解决链接卡片的背景问题。你也可以在他们的 官方文档 了解更多

最后还是要提一句，不要上传有敏感数据的图片到第三方网站，也不要滥用他们的服务，毕竟谁也不想用着用着就没有了。