Hexo博客中如何插入图片

Hexo是一个静态的博客网站生成器，生成一个博客只需要分分钟的时间就能搞定。

Hexo的博文是支持Markdown格式的，发表一篇文章只需要简简单单的几个命令。

hexo new '文章' 就会生成一个名为'文章'的md文件。

在图中位置添加描述，分类以及标签，有利于搜索分类。

众所周知，在md文件中插入图片的语法为 ![]() 。

其中 方括号 是图片描述， 圆括号 是图片路径。

一般来说有三种图片路径，分别是 相对路径，绝对路径和网络路径 。

所谓的网络路径就是直接引用网上的图片，直接复制图片地址，放在圆括号中就完事了。

这种方式十分的方便，但是也存在一定的问题：

这种方式算是有利有弊。

绝对路径是图片在计算机中的绝对位置，相对路径是相对于当前文件的路径。

由于我们的博客是要部署在网站上，部署后会生成新的文件目录，所以我们选择使用相对路径的方式。

在hexo中使用 文章资源文件夹 需要在 config.yaml 文件中更改一下配置：

当该配置被应用后，使用 hexo new 命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。

虽然可以正常引用图片了，但是这种引用图片的方式只有一句话能形容，wtf。

插件 hexo-renderer-marked 解决了这个问题。可以只用 npm install hexo-renderer-marked 命令直接安装，之后在 config.yaml 中更改配置如下：

之后就可以在使用 [图片上传失败...(image-5f3c69-1603081095188)] 的方式愉快的插入图片了。

我们做了这么多都是为了方便，那么为什么不再方便一点呢。

上述是从文章资源文件夹中引用图片，前提是 先将图片放入到文章资源文件夹 ，如果图片数量众多的话，一张一张的放很影响效率。但是不用怕，我们有很方便的解决方法。

Typora 是我非常喜欢的Markdown文本编辑器，在之前的文章中也介绍过一点。

Typora对于插入图片的支持做得非常好，在 文件->偏好设置 或者直接 <C-,>进入设置。

使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。

如复制网络路径的图片 https://...../image.jpg 粘贴到Typora中叫 文章名 的文章后，图片会自动变为 [图片上传失败...(image-bd41f4-1603081095188)] 。

但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的 文件名/ 。不慌，也很简单。

在Typora编辑器中，使用 <C-f>快捷键，将所有的 文章名/ 替换为空即可删除。

然后再将博客上传，图片就会随着文章一起打包。在网页中就可以看到正常显示的图片，大功告成。

在写文章时，常常有配图说明的需求，Hexo有多种图片插入方式，可以将图片存放在本地引用或者将图片放在CDN上引用，通过此文总接一下在 hexo 搭建的博客中，插入图片的常用方式。

如果你要插入的图片，是一个外部的 src 链接地址，比如该图片存放在 CDN 上，或某某图床上面，那就使用 Markdown 默认的插入图片的方式，方法和插入链接很像，只是前面多了一个感叹号，如下：

当 Hexo 项目中只用到少量图片时，可以将图片统一放在 source/images 文件夹中，通过 Markdown 语法访问它们。

图片除了可以放在统一的 images 文件夹中，还可以放在文章自己的目录中，文章的目录可以通过配置 _config.yml 来生成。配置如下：

将 _config.yml 文件中的配置项 post_asset_folder 设为 true 后，执行命令 $ hexo new post_name ，在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name 。将图片资源放在 post_name 中，文章就可以使用 相对路径 引用图片资源了。

最后补充一种在 Markdown 中插入Base64 格式图片的方法，和第一种插入外链的方式类似，注意是圆括号 () ，而不是方括号 [] 。

效果见 https://zengwu.com.cn

在Hexo插入本地图片的时候，生成静态页面的时候不会将图片复制到发布目录下，这样发布出去后就不会显示出图片了。

安装 hexo-zngw-asset-image 插件

打开根目录下_config.yml配置文件，修改

添加

用Typora编辑文件时，可以调整一下图片插入配置，直接拖入本地图片或远程图片自动直接保存为 *.md 同名文件夹目录

---