hexo博客中插入图片失败——解决思路及个人最终解决办法

1、前言

今天晚上花了大概1个小时在晚上搜寻各种hexo博客插入图片无法显示的解决办法，很多方法是重叠的，所以真正不同的解决方法并不多。

尤其让我有些惊讶的是不同的几篇博客，内容根本完全一样，就是纯粹的copy，虽然说明了转载（注明转载的话往往还放在最后一句，这种东西不应该开篇说明最好吗？），但是我觉得直接给出链接不就可以了吗？为何还要完全从头到尾copy一遍？而且多少加上一些自己的理解，稍微修缮一下原博文，这样不断转载的版本也会越来越好。

闲言碎语多扯了一点。本回答受该博客启发较大。

2、解决方案

2.1 创建图片资源文件夹

网上有关的解决方式几乎很大一部分会提到这一点：将_config.yml 文件中的post_asset_folder 选项设为 true 来打开。事实上这正是hexo官方文档给出的解决方案之一中的一个步骤。仔细阅读后会发现如下几点：

1. 该操作的作用就是在使用hexo new xxx指令新建博文时，在相同路径下同步创建一个xxx文件夹，而xxx文件夹的作用就是用来存放图片资源；
2. 就我个人而言，我偏好于直接在source\_posts文件夹下新建md文件，而不是通过hexo new xxx指令；
3. 那么直接新建xxx.md再新建xxx文件夹，这种操作的最终效果和使用hexo new xxx指令新建博文的效果一样吗？经过实测，是一样的。

基于以上3点，告诉大家几个结论：

1. 新建博文可以不用hexo new xxx指令，我较为推荐直接新建文件和文件夹的方式，只要达到一个md文件，一个同名文件夹的效果即可；
2. 【将_config.yml 文件中的post_asset_folder 选项设为 true 】是必须的！理论上既然没用hexo new xxx指令，文件夹也是我自己新建的，这一步设置的意义似乎并不存在，但是后文介绍的插件必须在post_asset_folder 选项设为 true的情况下才能生效——本人亲测，大家记住这么设置即可！

2.2 typora中图像设置

一般来说，大家会现在typora里写好md格式的博客，然后通过hexo clean、hexo g、hexo s进行一下本地测试，确认无误后再发布到远端。

暂且不说hexo博客的图片插入是个问题，我相信当初单纯利用typora做笔记时，图片文件的管理就让很多人头疼过，typora官方似乎也意识到这个问题，所以偏好设置中图像是专门的一项，提供了很多选择。

我相信大多数同学写md时的图片很多可能是直接截图或者在其他地方copy的，然后在typora中直接粘贴就ok了。但是这么做之前最好把typora插入图片时采取何种操作配置好，否则md文件和图片相隔十万八千里，后续一旦移动md文件图片就识别不出来，相信大家用过typora都深有体会。

所以接下来讲一下typora如何设置。直接给结论：
框里的路径是：./${filename}。./表示当前文件夹，${filename}表示当前文件名。这么设置的好处：

1. 图片资源文件夹有了；
2. 而且是同名文件夹！（2.1中的文件夹其实不用手动添加了）

这么设置的结果就是：想写篇博客，在source\_posts文件夹下新建xxx.md文件，写着写着需要插一张图，从别处复制，然后在typora中直接粘贴，bling!图片资源文件夹自动搞定，并不用关心什么文件夹，只管专注于md文件即可。

2.3 插件下载

这个很多博客也有提到，插件的名字叫hexo-asset-image，相信在网上找了一波解决方案的同学一定对这个名字不陌生。

这个插件的不同版本可能会有不同的影响，我最终成功解决问题的版本是用如下命令下载的：

npm install https://github.com/CodeFalling/hexo-asset-image --save

为什么需要这么插件呢？

因为我们虽然在source\_posts文件夹下写了md文件，也有了图片资源文件夹存了图片，但从我们前面typora中的设置不难知道，实际上md文件中的图片路径都是相对路径（./${filename}）。而实际网上看到的博文显然不是md文件，而是html文件，从md到html的转变就是hexo帮我们做的，还记得hexo g命令吗？就是干这个的。转换后的html文件在public目录下，路径是通过日期指示的。

下面第一张图是存放md文件的地方，图片就在图中的jiangzhou文件夹中；第二张图是generate之后存在html和图片资源的地方。


大家如果了解过html的话，应该知道里面的图片应该是指定绝对路径的，大家可以打开上面第二张图的index.html，找到插入图片的地方，查看是否是可用的绝对路径，我的如下图。大家如果问题还没解决的话应该不是像我一样的日期+文件夹指明的绝对路径。
说到这儿，大家应该知道，理论上需要将md中图片的相对路径转换成html中的绝对路径，这样图片才能正常显示。因为我们图片资源也有了，显示不出来只能是路径不对（为验证，大家图片显示不对的话，打开index.html，插图片地方的路径肯定是一串不明所以的字母数字）。

路径转换就是该节最开始提到的插件的作用：根据md图片的相对路径，给出html中图片的绝对路径。

2.4 修改md图片路径

经过前面typora的设置，大家粘贴图片到typora应该是这种画风：

路径：md文件名/图片名
图片资源文件夹：自动生成且同名。

这时如果用hexo clean、hexo g生成html文件，用Notepad++或其他工具打开index.html（路径见下方第一张图），找到插图片的地方，查看图片路径（见下方第一张图）：
发现图片路径似乎多了一串07/07/test！如果用hexo s在本地查看网页，会发现是下面这个样子：
点开那个未加载的图：

继续点The image：

可以发现这里显示的路径和我们在html文件源码中看到的是一致的，既然觉得路径重复，那么我们就把重复的删了试试看：

图片显示出来了！

既然是路径问题，那么是不是插件有问题？或者我们使用方法错了？

找到插件安装位置（插件都在node_modules文件夹下），打开readme文件（怎么是1985年的？！(*/ω＼*)）
readme如下：
瞬间发现别人的说明书讲得明明白白，言简意赅！我们的转化后路径不对正是因为我们md文件中图片的路径不对，图片名前面不能有其他东西！

删去test/（这样md中图片就没法正常显示了），重新hexo clean、hexo g、hexo s测试——

本地网页显示如下：
发布到远端我这边也没什么问题，至此该问题算是解决了。主要就是编译（我姑且称之为编译，有点那个味道）前需要在md中把图片的路径都删去前面的xxx/，图片一多可能还是有些繁琐，但目前还没有找到更好的替代方法。

小结

找解决方案找了一个多小时，写这篇博客好像写了2个多小时。感觉应该把整个过程讲得还算比较清楚了。

但是这种问题向来因人而异，同样的解决方法可能可以解决我的问题，但对另一个人无效。还是要多查找资料，多尝试，多思考。