Hexo中插入图片的方法

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 2.3k | 阅读时长 ≈ 2 分钟

在写文章时，常常有配图说明的需求。Hexo有多种图片插入方式，可以将图片存放在本地引用或者将图片放在CDN上引用。

插入本地图片

绝对路径

本地图片统一放在source/images文件夹中。

使用Markdown语法

1
2
3
1  ![](/images/test.jpg)
2  helllsfl
3  fslfml

注意：
●images的名字可以改变，比如images0,images1,等
●images前面的”/“，必须要有，且不可写source，格式固定。

使用Html语法

1
<img src="/images/test.jpg">

相对路径

使用插件

1、把根目录下的配置文件_config.yml里的post_asset_folder选项设置为true；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1 # 文章配置
2 # 这个地方一般直接取默认值不用修改
3 # Writing
4 new_post_name: :title.md # File name of new posts # 新文章的文件名称
5 default_layout: post # 预设布局
6 titlecase: false # Transform title into titlecase # 把标题转换为 titlecase（titlecase指的是将每个单词首字母转换成大写）
7 external_link: true # Open external links in new tab # 在新标签中打开链接
8 filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写, 0表示不变
9 render_drafts: false # 显示草稿
10 post_asset_folder: true # 启动 Asset 文件夹
11 relative_link: false # 启动 Asset 文件夹
12 future: true # 显示未来的文章
13 highlight: # 代码块的设置
14   enable: true
15   line_number: true # 是否显示行号
16   auto_detect: false # 是否自动监测
17   tab_replace: # 将 tab 替换成其他字符串
```  
2、在你的hexo目录下执行这句话npm install hexo-asset-image --save，这是下载安装一个可以上传本地图片的插件：
``` bash
huangsengolndeMacBook-Pro:hexo-blog huangaengoln$ npm install hexo-asset-image --save
(node:59464) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
hexo-site@0.0.0 /Users/huangaengoln/Documents/hexo-blog
└─┬ hexo-asset-image@0.0.3 
  └─┬ cheerio@0.19.0 
    ├─┬ css-select@1.0.0 
    │ ├── css-what@1.0.0 
    │ └── domutils@1.4.3 
    └── lodash@3.10.1 
huangsengolndeMacBook-Pro:hexo-blog huangaengoln$

3、下载完成后，下次再执行hexo n “1How-to-change-App-theme-color”来生成md博文时，/source/_posts文件夹内除了1How-to-change-App-theme-color.md文件，还有一个与之同名的文件夹；

4、最后在1How-to-change-App-theme-color.md中想引入图片时，先把图片复制到md对应的文件夹1How-to-change-App-theme-color中，然后只需要1How-to-change-App-theme-color.md中按照markdown的格式引入图片：

1
1 ![你想输入的替代文字](xxxx/图片名.jpg)

注意：xxxx是这个md文件的名字，也是同名文件夹的名字，你想引入的图片就只需要放入xxxx这个文件夹内就好了，很像引用相对路径。
5、最后检查一下，hexo g生成页面后，进入public\2017\02\26\index.html文件中查看相关字段，可以发现，html标签内的语句是插入网络图片

使用Markdown语法

1
![](网络图片地址)

使用Html语法

1
<img src="网络图片地址">

使用图床

可以把你的图片上传到 七牛之类的服务器，然后直接按照markdown的方式使用。
例如可以使用github作为图床，

CDN引用

除了在本地存储图片，还可以将图片上传到一些免费的CDN服务中。比如Cloudinary提供的图片CDN服务，在Cloudinary中上传图片后，会生成对应的url地址，将地址直接拿来引用即可。(来源：Yan Yinhong)

------------------------ The End ------------------------
0%