解决图片的防盗链导致图片显示不出来

发表于 |

前言

你平常有可能将图片存放到github、gitee 或者博客园 简书等等地方, 供静态博客使用, 除了github之外 大部分国内的网站都设置了图片防盗链

如果直接使用会导致图片无法显示

解决防盗链的问题其实也非常简单

解决方案

在html的head标签中添加如下代码即可:

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

如果你只想处理某部分图片, 可以针对性设置, 比如:

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

批量替换图片域名

偶尔图床CDN挂了需要更换域名, 一些文章存放在数据库,比如wordpress网站 为了方便 可以采用js动态替换的方式, 将以下代码拷贝到html页脚标签中即可 

1
2
3
4
5
6
7
8
<script>

      let context = Array.prototype.map.call(document.images, (event) => {
          event.src = event.src.replace("cdn.jsdelivr.net/gh/xxx/xxx", "raw.staticdn.net/xxx/xxx/master")
        
      });

  </script>

另外还可以动态添加meta标签

1
2
3
4
5
6
7
8
9
10
11
const addMeta = (name, content) => {
  const meta = document.createElement('meta');
  meta.content = content;
  meta.name = name;
  document.getElementsByTagName('head')[0].appendChild(meta);
};
 
addMeta(
    'referrer',
    'never',
  );

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%