hexo文章加入图片

hexo博客文章是使用markdown语法写的，但是在文章发布之后显示不了图片。这是因为hexo默认无法显示本地插入的图片。

友情提示：以下出现的代码语句均在命令行界面操作

显示图片的方法

A.模版引擎的语法显示图片

将根目录配置文件_config.yml里面的 post_asset_folder 的选项值设置为true；
用 hexo new post [title] 在 /source/_posts 目录下创建md文件，因为post_asset_folder的值设为true之后，会在md文件同目录下创建一个与md文章同名的文件夹，用于存放该文章相关的资源，方便使用；
把要引用的图片拷贝到资源文件夹里；
在md文件中使用 {% asset_img example.jpg This is an example image %} 语句来引用本地图片。

下面拿一张图片来做测试吧！

新建一篇名为photo-test-demo的文章

1	hexo new post "photo-test-demo"

接着，往资源目录里放入一张小姐姐的照片。

girl

文件目录结构如下

1
2
3

├── photo-test-demo
│   └── girl.jpg
├── photo-test-demo.md

photo-test-demo.md文章，分别用了模版引擎的语法与markdown语法

---
title: photo-test-demo
date: 2019-10-12 19:29:13
categories:
tags:
id: test
---

{% asset_img girl.jpg red hair girl %}

![girl](photo-test-demo/girl.jpg)

启动服务器浏览页面

hexo s

浏览器显示如下：

模版引擎渲染图片

不出所料，使用模版引擎的语法可以在文章中显示图片，用markdown语法显示不了。

B.用markdown的语法显示图片

毕竟用的是markdown语法写文章，也希望用markdown语法![](xxxx/example.jpg)引用本地图片，来保证代码的整洁一致性。而模版引擎的语法也不常用。
这就需要通过安装 hexo-asset-image 扩展插件来支持了。

在hexo的根目录下执行命令,安装hexo-asset-image插件
1
npm install hexo-asset-image --save
启动服务器看效果
1
hexo clean && hexo g && hexo s

看下图！发现图片居然还是加载不了，而且图片的src地址是什么/.com//@##..?，我内心瞬间：@#%、#&￥这不乱套了吗！？怎么会这样？这，可咋办吶？真是有点耐人寻味啊…

hexo-asset-image不生效

没办法，google之后恍然大悟，原来这问题是由插件的版本引起的！

解决方法：

打开hexo根目录下的package.json文件,可见hexo-asset-image的版本是1.0.0，而我的hexo版本是3.9，这新版插件对3.x版hexo支持不到位，退回旧版本0.0.1就ok了。将hexo-asset-image的版本改为0.0.1，即改为"hexo-asset-image": "^0.0.1"

插件版本

在hexo根目录下执行npm install重新下载依赖
重启服务器
1
hexo clean && hexo g && hexo s

结果如下，我们想要的markdown语法生效了(上面的那条语法失效，咱也不敢说，咱也不敢问啊)。

hexo-asset-image生效

总结

本文主要描写了系统配置post_asset_folder用来开启文章的资源目录，hexo-asset-image插件用来支持图片markdown语法，两者相铺相成，解决了hexo文章无法加入图片的问题。表达了作者对hexo系统的热爱与技术的追求。

后记

答案：略。