大聪明，用 js 替换图片链接，抛弃对象存储

之前讲到对象存储，我使用了腾讯云的对象存储来当博客图床。

用了一段时间后，我还是决定弃用了。一方面是担心待会别有用心的人，来盗刷我的对象存储流量，毕竟网上有很多人遇过了，谁叫对象存储是可以欠费的呢。

另一方面，我分析一下，现在对象存储选的是广州的服务器，而我自己有一台香港的服务器。如果我将博客图片，放到这台香港服务器上面，速度方面还是绰绰有余的。

那要怎么将图片放到自己的服务器上呢？🤔如果是其他人，可能需要去装个图床应用之类的。但是我不需要，因为我的备份博客就在这台服务器上面。😉

https://powersee.github.io/ 这个网址访问的是 GitHub Pages 上的网页文件。

而 https://blog.powersee.top/ 访问的是我服务器上面的网页文件。

我实现备份博客的方法也很简单，因为我的博客托管在 GitHub 上面，所以我在服务器上面设置定时任务，每天凌晨自动执行 git pull 来更新博客。🤗

那么我博客上的图片，服务器上都是有的。

此时简单的方法就是，将文章中的图片链接，都加上备份博客 https://blog.powersee.top/ 的前缀，在 vscode 里面批量替换可以很快处理完。

但是这样有些问题，就是当我写好文章后，在本地执行 hexo s 来预览时，图片就加载不出来，因为此时图片还没有传到服务器上。

所以我的想法是，当通过 https://powersee.github.io/ 访问我的博客时，才替换图片链接。通过其它的域名访问，不会替换。

这样的要求，就需要使用 JavaScript 来实现。

if (window.location.host == "powersee.github.io") {

	// 获取当前网页中 body 的所有 img 标签
	const imgElements = document.querySelectorAll('body img');

	// 遍历每个 img 标签
	for (let i = 0; i < imgElements.length; i++) {
	const imgElement = imgElements[i];
	const src = imgElement.getAttribute('src');

	// 检查 img 标签的 src 是否以 /img/ 开头
	if (src.startsWith('/img/')) {
		imgElement.setAttribute('src', src.replace('/img/', 'https://blog.powersee.top/img/'));
	}
	}
}

于是我在 js 文件中加入这段代码，就实现了我的目的。😘

假如我以后不需要替换了，那么只需要去掉这段代码就行。😎

如果我以后换域名了，也只需要修改这段代码，不需要去替换所有的文章原文本。

我个人对此还是比较满意的。😊