Hexo 博客自带图片显示问题处理方法

mac用户推荐使用ipic，一个很牛的个人开发者开发的工具，使markdown插入图片的操作变得异常简单，链接：http://www.jianshu.com/p/e46a91ae20b9

有两种方法，第一种是不用插件的情况，第二种是使用一种hexo的插件。

无论哪种方法都有一个共同的前提：修改_config.yml配置文件post_asset_folder项为true。

创建博客是使用命令创建：

hexo new [layout] <title>

其中的layout项可以省略，例如：

hexo new "hexo博客自带图片显示问题处理方法"

使用完命令之后，在source/_post文件夹里面就会出现一个“hexo博客自带图片显示问题处理方法.md”的文件和一个 “hexo博客自带图片显示问题处理方法”的文件夹。

下一步就是把需要的图片放到新创建的那个文件夹里面去。

引用图片的第一种方法

{% asset_img hexo博客自带图片显示问题处理方法.png 这是图片的说明 %}

用此种方法，而不是以前的![]()方法，前提是你的hexo的版本是hexo3以上，到package.json里面看一下吧。如果不是hexo3以上的版本，那就只能用第二种方法了。

例子

我现在写了一个段落，并且想在这个段落的某一个地方{% asset_img hexo博客自带图片显示问题处理方法.jpg hexo博客自带图片显示问题处理方法 %}引入一张图片

错误的例子

我现在写了一个段落，并且想在这个段落的某一个地方[图片上传失败...(image-b446bd-1510018038370)]引入一张图片

下面是第二种方法，hexo插件的方法

这是插件的链接

安装

npm install hexo-asset-image --save

如果安装失败使用 npm install https://github.com/CodeFalling/hexo-asset-image –save

安装之后就可以按照正常的方法使用的，比如：

{% asset_img hexo博客自带图片显示问题处理方法.png 图片上传失败 %}

和

![图片上传失败](hexo博客自带图片显示问题处理方法.png)

都可以实现，而我比较喜欢使用后者。

此两种方法除了操作有些区别之外，在图片的显示上也略有不同，第一种的图片信息是会显示出来的，而第二种中括号里面的信息是不会显示的。