LOADING

加载过慢请开启缓存 浏览器默认开启

Typora+picgo+github搭建图床实现博客图片正常显示

前言

很久之前就做好的内容,但是由于各种各样的因素,鸽了挺久,现在补上。

这里只是提供一种解决方案,解决问题的方法不止一种,利用善于利用搜索可以获得更多解决方案。

博客图片无法显示的原因

如标题而言,这篇文章就要讲述的就是之前的基于hexo快速搭建的个人博客中,文章的图片无法正常显示的问题。

在Typora中,图片是写的路径位置,但当把文章上传到博客编辑的时候,博客是无法访问本地图片的路径的,所以在博客上的图片不能正常显示。不过,博客能访问网上图片的路径,因此只需要把图片上传到一个网页里面存放,然后在写博客的时候就可以直接正常使用。这就是图床的功能,简单来说就是你需要将图片上传到网上,以至于可以找到实现链接显示。

考虑到简单的博客搭建,再加上先前的个人博客就是利用github pages实现,已经接触过GitHub,故而,我们接着利用GitHub。使劲薅

具体操作

第一步 创建存放图片的仓库

登录自己的Github,然后新建一个仓库用于存储图片

image-20240721212250153

image-20240721221630058

如此,用于存储的仓库就建好了。

第二步 安装配置Picgo

搜索安装软件,注意,记住软件安装的位置在哪!!!下一步需要用到

安装后的界面如下

image-20240721222042533

点击图床设置中的Github

image-20240721222422203

仓库名是账号/仓库名的形式

分支名一般仓库默认创建的是main分支

Token需要去Github的setting页面获取

image-20240721223035486

image-20240721223632140

然后滑至最下的页面生成token,将token复制到picgo配置的位置

注意,token生成的时候不要立马关掉页面,关闭后不会再显示,注意保存

点击picgo配置设置的确定保存

然后找一张图片直接拖动到上传区的页面,上传,再去GitHub的仓库看看图片是否上传成功

第三步 Typora有关设置

打开Typora,点击文件,偏好设置,图像

点击验证会向仓库上传位置上传Typora的图标

如果出现错误,可以看报错信息提示的文件路径,打开picgo.log日志文件,查看错误原因,针对对应的错误去解决,这一部分就得多利用搜索以及ai等工具,确信

上传博客文章图片

在写文章的时候,需要插入图片就直接插入图片,右键图片,可以看到上传图片,点击即可上传

如果你嫌每次插入图片都要上传麻烦的话,可以直接回Typora的设置,将图像插入时的操作直接跟换为上传图片,不过这样的弊端就是只要是用Typora写东西插入图片都会自动上传,有时容易将一些原本不想上传的内容都直接上传

建议插入图片和上传图片还是有个分离,而不是直接捆绑。

当图床过期怎么办?

前往github重新生成token,去Github的setting页面获取,记得picgo里也需要更新token。

写在最后

至此,就是Typora+picgo+Github搭建图床的全部内容。如果还是无法显示图片,看看网络情况,再看看仓库内是否上传了图片等。善用搜索、善用ai。