feat: 图片使用远程链接

README.md

@@ -2,9 +2,8 @@
 
 ## 待办
 
-- 图片懒加载
-- 图片放大
 - 404页面
 - 订阅模块
 - 最近文章卡片
 - 上一篇下一篇功能
+- 头像未加载处理

source/_posts/back/node/node-crawler.md

@@ -131,7 +131,7 @@ node crawler.js
 
 ## 效果图
 
-![效果图](/images/node-crawler_1.webp)
+![效果图](https://image.luckyzh.cn/images/node-crawler_1.webp)
 
 ## 总结
 

source/_posts/back/node/vercel.md

@@ -66,9 +66,9 @@ export default app;
 ## 部署到 Vercel 平台
 
 1. 使用自己的 Github 账号 登陆 [Vercel](https://vercel.com/)
-2. 在 Overview 中点击 Add New Project 创建一个项目。![](/images/vercel_4.webp)
-3. 选择你需要托管的 node 项目，点击 import 。![](/images/vercel_5.webp)
-4. 配置你的项目，都使用默认，然后点击 Deploy 部署就可以了。![](/images/vercel_6.webp)
+2. 在 Overview 中点击 Add New Project 创建一个项目。![](https://image.luckyzh.cn/images/vercel_4.webp)
+3. 选择你需要托管的 node 项目，点击 import 。![](https://image.luckyzh.cn/images/vercel_5.webp)
+4. 配置你的项目，都使用默认，然后点击 Deploy 部署就可以了。![](https://image.luckyzh.cn/images/vercel_6.webp)
 
 ## 或通过 Vercel CLI 部署
 
@@ -106,8 +106,8 @@ vercel build
 > 需要事先花个十几块钱购买一个域名
 
 1. 找到刚刚创建的 Vercel 项目中的 Settings，设置 Domains
-2. 把自己的域名填上去，例如 `blog.luckyzh.cn`，点击 Add，然后会提示报错，因为还没有解析域名。![](/images/vercel_1.webp)
+2. 把自己的域名填上去，例如 `blog.luckyzh.cn`，点击 Add，然后会提示报错，因为还没有解析域名。![](https://image.luckyzh.cn/images/vercel_1.webp)
 3. 可以看到这里提供了两种方式，这里演示第一种 CNAME（Recommended），添加一条记录，也就是解析一个子域名。
-4. 在购买域名的平台，找到域名控制台，点击域名解析，添加记录。![](/images/vercel_2.webp)
-5. 按照之前生成的信息对应填入就可以了。![](/images/vercel_3.webp)
+4. 在购买域名的平台，找到域名控制台，点击域名解析，添加记录。![](https://image.luckyzh.cn/images/vercel_2.webp)
+5. 按照之前生成的信息对应填入就可以了。![](https://image.luckyzh.cn/images/vercel_3.webp)
 6. 返回站点就可以看到已经配置成功了！

source/_posts/front/js/upload-img.md

@@ -108,7 +108,7 @@ css 样式
 
 效果展示
 
-![](/images/upload-img_1.webp)
+![](https://image.luckyzh.cn/images/upload-img_1.webp)
 
 ### 二、上传图片并展示
 
@@ -135,8 +135,8 @@ upload.onchange = function (value) {
 
 上传成功后展示
 
-![](/images/upload-img_2.webp)
-![](/images/upload-img_3.webp)
+![](https://image.luckyzh.cn/images/upload-img_2.webp)
+![](https://image.luckyzh.cn/images/upload-img_3.webp)
 
 ### 三、实现图片预览
 
@@ -225,4 +225,4 @@ delImg.onclick = function () {
 
 预览效果图
 
-![](/images/upload-img_4.webp)
+![](https://image.luckyzh.cn/images/upload-img_4.webp)

source/_posts/front/js/video-track-cors.md

@@ -17,7 +17,7 @@ tags:
 
 可以看出视频和字幕在同一个域下，视频可以正常播放，但是字幕却出现了跨域报错：
 
-![跨域报错](/images/video-track-cors_1.webp)
+![跨域报错](https://image.luckyzh.cn/images/video-track-cors_1.webp)
 
 ## 问题分析
 
@@ -76,4 +76,4 @@ fetch('https://cdn.plyr.io/static/demo/thumbs/240p.vtt')
 
 通过 `fetch` 请求字幕文件，将内容做一层转换，绕过了 `track` 元素对于非同源路径的跨域限制，完美的解决了这个问题。  
 
-![字幕显示效果](/images/video-track-cors_2.webp)
+![字幕显示效果](https://image.luckyzh.cn/images/video-track-cors_2.webp)

source/_posts/front/nvm.md

@@ -14,7 +14,7 @@ Node 版本管理工具，可以用来安装或切换不同版本的 node.js
 选择 `.exe` 文件，下载后直接点击安装，安装路径不可有空格或中文。
 <https://github.com/coreybutler/nvm-windows/releases>
 
-![](/images/nvm_1.webp)
+![](https://image.luckyzh.cn/images/nvm_1.webp)
 
 ## 基本命令
 

source/_posts/front/vue/algolia.md

@@ -56,12 +56,12 @@ onMounted(() => {
 
 ## 申请 DocSearch 服务
 
-1. 前往 [DocSearch Apply](https://docsearch.algolia.com/apply)，填写网站地址，邮箱，仓库地址，提交申请。![](/images/algolia_1.webp)
-2. 提交申请之后会收到一封邮件，表示他们已经收到申请并很快会回复！![](/images/algolia_2.webp)
-3. 等几分钟之后就会收到处理完成的邮件，里面有我们需要的 `appId`, `apiKey`, `indexName`，将它们填入组件中。![](/images/algolia_3.webp)
+1. 前往 [DocSearch Apply](https://docsearch.algolia.com/apply)，填写网站地址，邮箱，仓库地址，提交申请。![](https://image.luckyzh.cn/images/algolia_1.webp)
+2. 提交申请之后会收到一封邮件，表示他们已经收到申请并很快会回复！![](https://image.luckyzh.cn/images/algolia_2.webp)
+3. 等几分钟之后就会收到处理完成的邮件，里面有我们需要的 `appId`, `apiKey`, `indexName`，将它们填入组件中。![](https://image.luckyzh.cn/images/algolia_3.webp)
 4. 前往 [爬虫后台](https://crawler.algolia.com/admin), 如果 Records 有数量，说明已经爬取成功了！
-   如果没有也可以点击 Editor，进入查看自己的域名有没有填写正确。![](/images/algolia_4.webp)
+   如果没有也可以点击 Editor，进入查看自己的域名有没有填写正确。![](https://image.luckyzh.cn/images/algolia_4.webp)
 
 ## 最终效果
 
-![](/images/algolia_5.webp)
+![](https://image.luckyzh.cn/images/algolia_5.webp)

source/_posts/front/vue/vue-i18n.md

@@ -17,7 +17,7 @@ npm install vue-i18n@9 --save
 
 ## 新建 i18n 文件
 
-1. 文件目录结构如下：<div>![目录结构图](/images/vue_1_1.webp)</div>
+1. 文件目录结构如下：<div>![目录结构图](https://image.luckyzh.cn/images/vue_1_1.webp)</div>
 
 2. 在 index.js 下创建 i18n 实例
 
@@ -95,6 +95,6 @@ toggle() {
 
 ## 使用效果
 
-![效果图1](/images/vue_1_2.webp)
+![效果图1](https://image.luckyzh.cn/images/vue_1_2.webp)
 
-![效果图2](/images/vue_1_3.webp)
+![效果图2](https://image.luckyzh.cn/images/vue_1_3.webp)

source/_posts/other/github-contribute.md

@@ -11,7 +11,7 @@ tags:
 
 在公司摸鱼的时候写了点自己的代码，但是当我打开 Github 主页查看贡献图的时候发现我的提交没有被记录，于是我通过 `git log` 查询 Commit 记录，检查出作者信息中的邮箱地址有误，没有切换成个人的邮箱地址。
 
-![Contributions](/images/github-contribute_1.webp)
+![Contributions](https://image.luckyzh.cn/images/github-contribute_1.webp)
 
 ## 如何解决？
 

source/_posts/website/giscus.md

@@ -16,23 +16,23 @@ Giscus 是一个基于 GitHub Discussion 的评论系统。
 ## 准备
 
 1. 新建一个公开的仓库
-   ![创建公开仓库](/images/giscus_1.webp)
+   ![创建公开仓库](https://image.luckyzh.cn/images/giscus_1.webp)
 
 2. 找到仓库中的 Settings 设置，勾选 Discussions，并点击 Set up discussions，开启评论区
-   ![开启评论区](/images/giscus_2.webp)
+   ![开启评论区](https://image.luckyzh.cn/images/giscus_2.webp)
 
 3. 安装 [Giscus App](https://github.com/apps/giscus)
-   ![安装](/images/giscus_3.webp)
+   ![安装](https://image.luckyzh.cn/images/giscus_3.webp)
 
 4. 选择刚刚创建好的仓库，点击保存
-   ![选择仓库](/images/giscus_4.webp)
+   ![选择仓库](https://image.luckyzh.cn/images/giscus_4.webp)
 
 5. 前往 [Giscus 页面](https://giscus.app/zh-CN)，只需要填写仓库名称和 Discussion 分类
-   ![填写名称](/images/giscus_5.webp)
-   ![选择分类](/images/giscus_6.webp)
+   ![填写名称](https://image.luckyzh.cn/images/giscus_5.webp)
+   ![选择分类](https://image.luckyzh.cn/images/giscus_6.webp)
 
 6. 获取 `data-repo`, `data-repo-id`, `data-category` 和 `data-category-id` 这四个属性
-   ![获取属性](/images/giscus_7.webp)
+   ![获取属性](https://image.luckyzh.cn/images/giscus_7.webp)
 
 ## 使用
 

source/_posts/website/github-pages.md

@@ -25,7 +25,7 @@ GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓
 
 1. 在仓库下找到设置 `Settings`，在边栏部分找到 `Pages`
 2. 选择仓库分支；选择 `index.html` 文件所在路径，一般是 root
-3. 点击保存，过几分钟刷新下页面 ![](/images/github-pages_1.webp)
+3. 点击保存，过几分钟刷新下页面 ![](https://image.luckyzh.cn/images/github-pages_1.webp)
 4. 点击 Visit site 访问
 
 ## Vue 项目的打包部署流程

source/_posts/website/image-zoom.md

@@ -12,7 +12,7 @@ tags:
 [Fancybox](https://fancyapps.com/fancybox) 是一个流行的 JavaScript 图片和媒体轻盒效果库，用于在网页中展示图片、视频、内联内容和多媒体内容。
 它提供了一种优雅而灵活的方式来创建响应式的弹出窗口，使用户能够以漂亮的方式浏览和交互。
 
-![](/images/image-zoom_1.webp)
+![](https://image.luckyzh.cn/images/image-zoom_1.webp)
 
 ## 安装
 

source/_posts/website/open-graph-protocol.md

@@ -9,7 +9,7 @@ categories:
 
 当今互联网时代，社交媒体成为了人们分享信息和互动的主要平台之一。为了优化网站在社交媒体上的展示，提高网站内容的可分享性和可访问性，开放图谱协议（The Open Graph Protocol）应运而生。
 
-![Open Graph Protocol](/images/open-graph-protocol_1.webp)
+![Open Graph Protocol](https://image.luckyzh.cn/images/open-graph-protocol_1.webp)
 
 ## 什么是开放图谱协议？
 
@@ -37,7 +37,7 @@ categories:
 参考：[The Open Graph protocol](https://ogp.me/)
 
 在社交媒体上分享链接后的展示效果：
-![效果图](/images/open-graph-protocol_2.webp)
+![效果图](https://image.luckyzh.cn/images/open-graph-protocol_2.webp)
 
 ## 结语