本文要实现的目标

在typora添加图片后，图片会上传到github，并能在网站的文章中显示

前提

当前使用的主题为ButterFly，它将主题内需要用到的图片放到/themes/butterfly/source/img这个路径下，所有的文章都可以引用这里面的图片，例如，例如img/bg.jpg作为文章的封面，可以在md文件的头部添加如下内容。

1
2
cover: '/img/bg.jpg' 
//   /img是绝对路径，如果观赏github的目录，可以发现主题需要的所有图片都在此目录下

步骤

1、设置参数post_asset_folder

图片除了可以放在统一的img文件夹中，还可以放在文章对应的目录中。

文章的目录可以通过配置hexo的_config.yml来生成（不是主题里面的config.yml文件），让post_asset_folder参数设置为true。

1
post_asset_folder: true

这个功能开启后，如果使用hexo new '文章名'创建文章时，会同时生成“文章名”对应的文件夹，此文件夹下面可以存入同名文章需要用到的图片，相当于一篇文章有一个专属文件夹用来存放相关图片等资源。

2、设置Typora

另外，需要在Typora里面偏好设置->图像->插入图片时，选择复制到指定路径为./${filename}

并且！！！

下面的选项中

  • 优先使用相对路径选中！！！（目的是上传到github后，可以找到路径）
  • 插入时转义图片最好也选中，如果图片名是中文的话，需要转义后才能引用
Typora设置

3、github上检测

完成这些后，再新建一篇文章，随便复制一张图片到文章中，再上传到github尝试访问。如果能在github库的对应目录下找到这个文章的index.html和对应图片，则成功了。

比如：我创建的名为“test2”的md文件，同时在电脑本地生成了test2文件夹，我复制一张图片到md文件里面后，Typora自动将图片复制到了test2这个文件夹内。随后，点击上传到github，如下图所示：

image-20220527125914664

4、网站上检测

同时打开网站看看是否可以显示出图片，图片显示正常。成功！！！

image-20220527130155875