文章目录

1、前言
2、解决方案
- 2.1 创建图片资源文件夹
- 2.2 typora中图像设置
- 2.3 插件下载
- 2.4 修改md图片路径
小结

1、前言

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

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

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

2、解决方案

2.1 创建图片资源文件夹

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

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

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

新建博文可以不用hexo new xxx指令，我较为推荐直接新建文件和文件夹的方式，只要达到一个md文件，一个同名文件夹的效果即可；
【将_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}表示当前文件名。这么设置的好处：

图片资源文件夹有了；
而且是同名文件夹！（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个多小时。感觉应该把整个过程讲得还算比较清楚了。

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

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

Hexo博客中插入图片，在网页中无法显示：采用图床外链的方法
个人博客:小序的时光机,欢迎访问! 最近在用Hexo搭建博客过程中,发现如果在博文中添加本地图片,网页上的图片无法显示.网上的搜到的方法很多都是利用hexo-asset-image插件,然而该插件还是 ...
如何在CSDN博客中插入图片
如何在CSDN博客中插入图片 1.打开CSDN编辑页面 2.点击插入图片 3.注意事项最近笔者准备开始使用CSDN写博客,但是发现插入图片后无法显示,所以跟大家分享一下如何插入图片.在我仔细专研后, ...
装饰博客全攻略（如何在博客首页或博客中插入图片、音乐、视频等）
一.在博客中插入图片. 以下是代码: <img src="http://图片地址" border="0" width="344" he ...
Hexo博客中插入音乐
hexo 搭建的个人博客:Aileen-zl 1. 前言正所谓没有逼格的博客不是好博客,而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调.Hexo作为一款优秀的静态博客生成器,当然也少不了 ...
在Hexo搭建的博客中插入音乐或者视频
原文地址在Hexo搭建的博客中插入音乐或者视频用hexo搭建博客后,记录了自己生活和学习中的很多事情.今天偶然想到能不能在博客中插入音乐和视频呢?然后就开始了今天的历程.... hexo-tag-a ...
hexo博客中添加音乐播放器
1. 简介本篇文章是介绍基于网易云iframe插件在hexo博客中加装音乐播放器的方法,无需安装任何额外插件. 2.安装步骤在网易云音乐中打开你想要插入的音乐页面,点击生成外联播放器. 在网页中 ...
如何在CSDN博客中显示图片而不是链接
之前想在发的博客里加入图片,结果试了好多次,只是在博客中显示图片链接...... 后来发现添加图片时没有选择宽度与高度,无语了...... 总结一下,希望以后遇到和我一样问题的朋友可以通过这篇博客得到 ...
新浪博客中插入高亮代码
在ie浏览器里可以用,但是不知道mac有没有这个插件原文地址:新浪博客中插入高亮代码作者:木子超-同学一． Sublime text 3是一个强大的代码编辑软件,强烈推荐 ...
让博客园博客中的图片支持fancybox浏览
我给博客中的图片设置了最大宽度,如果有大点的图片内容会模糊. 所以想实现点击图片可弹窗浏览.还好博客园支持自定义js和css.这样我们可以引入fancybox插件. 实现: 1. 进到配置页面http ...

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