博客图片失效？使用npm包20行代码一次下载/替换所有失效的外链图片

snowell 发布于2019-08-23 17:57 / 3444人阅读

摘要：前言大约一个月前，微博的图片外链失效了，以及掘金因为盗链问题也于决定开启防盗链，造成的影响是个人博客网站的引用了这些图片外链都不能显示。比如前段时间我的博客上引用的微博图片都不能显示了。用新的图片链接替换文件中某个域名的图片链接。

前言

大约一个月前，微博的图片外链失效了，以及掘金因为盗链问题也于2019/06/06决定开启防盗链，造成的影响是：个人博客网站的引用了这些图片外链都不能显示。

目前微博和掘金的屏蔽，在CSDN和segmentfault都是可以正常显示的，只影响个人博客。

比如前段时间我的博客:http://obkoro1.com上引用的微博图片都不能显示了。

因为我写博客比较频繁，被屏蔽的图片不在少数，肯定不能一个个手动的替换，查了一番没有找到现成的解决方案，做了个脚本工具，并且写了文档把它开源出来了。

markdown-img-down-site-change(下载/替换markdown中的图片)

搜索目标文件夹中的markdown文件，找到目标图片，提供下载图片，替换图片链接的功能-通常用于markdown 图片失效。

简介

这是一个极为轻量的脚本，引用包，设置好参数，通过API即可轻松上手。

解决什么问题？

集中下载markdown文件中某个域名下的图片到一个文件夹下。

用新的图片链接替换markdown文件中某个域名的图片链接。

// 1. 下载这两个图片
// ![](https://user-gold-cdn.xitu.io/2019/5/20/图片名字?w=2024&h=1240&f=png&s=339262)
// ![](https://user-gold-cdn.xitu.io/2018/6/16/图片名字)
// 2. 替换成：github的链接
![](https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/图片名字?w=2024&h=1240&f=png&s=339262)
![](https://raw.githubusercontent.com/OBKoro1/articleImg_src/master/juejin/图片名字)

安装:

npm i markdown-img-down-site-change -S

文档：

Github

API

更新日志

数据安全：

刚上手可能不了解脚本的功能，需要调试一番，这时候万一把markdown文件给改坏了，岂不是要哭死？

脚本有两种形式来防止这种情况发生：

脚本会默认备份你的文件。

默认开启测试模式，等到调试的差不多了，可以关闭测试模式。

建议：再不放心的话，可以先用一两个文件来测试一下脚本

使用：20行代码不到

在项目中有一个使用栗子，里面加了蛮多注释和空行的，实际代码20行都不到，可以说很简单了，如下：

// npm i markdown-img-down-site-change -S 
const markdownImageDown = require("markdown-img-down-site-change"); // 文件模块

// 传参： 这也是脚本的默认参数，根据情况可以自行修改
let option = {
    replace_image_url: "https://user-gold-cdn.xitu.io/",
    read_markdown_src: "./source", // 要查找markdown文件的文件夹地址
    down_img_src: "./juejin", // 下载图片到这个文件夹
    var_number: 3 // url前半部分的变量数量 比如上面的日期: /2019/5/20/、/2018/6/16/
}

// 初始化
const markdownImage = new markdownImageDown(option)

// 下载外链
markdownImage.checkDownImg();

// 上传下载下来的图片文件夹到云端 用户自己操作

// 上传图片之后 
// 脚本会把以前的外链替换成云端地址+拼接一个图片名
markdownImage.updateOption({
    new_image_url: "https://xxx.com/目录地址/", // 图片上传的地址
    add_end: "?raw=true" // github图片地址有后缀 直接进去是仓库
})

// 替换外链 
// 把replace_image_url的字符串换成new_image_url字符串
markdownImage.replaceMarkdown();

运行：

仔细阅读文本，配置好参数之后

在项目根节点新建一个handleImg.js文件，安装一下脚本，然后用node运行该文件：

npm i markdown-img-down-site-change -S
node handleImg.js

功能/参数简介：

checkDownImg()：下载查找到的图片

replaceMarkdown(): 替换图片链接为新的图片链接

replace_image_url：要替换的图片地址

new_image_url：图片的新地址

test: 测试模式。

var_number: 匹配图片链接的图片名之前的url，值为变量数量

is_link: 匹配链接。

write_file_time: 间隔多久修改markdown图片链接

read_markdown_src：要查找markdown文件的文件夹地址

down_img_src：下载图片到这个地址下

copy_item_data: 备份项目

filter_item: 过滤某些文件夹，不查找markdown。

add_end：在图片链接后面添加后缀添加后缀

欢迎试用

有需要的小伙伴，赶紧来试试吧！文档写的很全，上手非常轻松，项目将会持续维护，有什么问题，欢迎给我提issue~

如果觉得这个脚本还不错的话，就给项目点个Star吧！

博客、前端积累文档、公众号、wx:OBkoro1、邮箱：obkoro1@foxmail.com

以上2019.06.04

GPU云服务器云服务器 js替换图片代码 asp图片替换代码 npm 服务器图片图片外链

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104415.html

解决博客图片存储——阿里云的OSS运用

摘要：接下来讲解一下博客中用的图床阿里云对象存储，简称，虽然目前大家用的比较多的是七牛云之类的，但是因为我个人原因我还是选择了阿里云，后面我会简单说明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言之前打算写一篇有关个人博客SEO优化的体验和一些自身体会，但是发现自己还没完全...

Lowky 2019-08-29 12:31 评论0 收藏0
解决博客图片存储——阿里云的OSS运用

摘要：接下来讲解一下博客中用的图床阿里云对象存储，简称，虽然目前大家用的比较多的是七牛云之类的，但是因为我个人原因我还是选择了阿里云，后面我会简单说明下原因。 showImg(https://segmentfault.com/img/remote/1460000008838754?w=960&h=300); 前言之前打算写一篇有关个人博客SEO优化的体验和一些自身体会，但是发现自己还没完全...

incredible 2019-08-01 16:46 评论0 收藏0
图床失效了？也许你应该试试这个工具

摘要：但线程过多也许会触发图床的保护机制，同时也和自己电脑配置有关，这个得结合实际情况考虑了。图床限制这个是图片过多一定是大概率出现的，上传请求的频次过高很容易被限流封。 showImg(https://segmentfault.com/img/remote/1460000019118030?w=1920&h=1016); 前言经过几个小伙伴的提醒，发现个人博客中的许多图片都裂了无法访问；...

aristark 2019-08-16 17:14 评论0 收藏0
输入URL到浏览器显示页面的过程，搜集各方面资料总结一下

摘要：通用头部这也是开发人员见过的最多的信息，包括如下请求的服务器地址请求方式请求的返回状态码，如代表成功请求的远程服务器地址会转为譬如，在跨域拒绝时，可能是为，状态码为等当然，实际上可能的组合有很多。面试中经常会被问到这个问题吧，唉，我最开始被问到的时候也就能大概说一些流程。被问得多了，自己就想去找找这个问题的全面回答，于是乎搜了很多资料和网上的文章，根据那些文章写一个总结。写得不好...

adie 2019-08-23 13:39 评论0 收藏0