图片

在文章插入图片

绝对路径

将图片统一放在next/source/images文件夹通过markdown语法访问它们,图片既可以在首页内容中访问到，也可以在文章正文中访问到。

![](/images/image.jpg)

相对路径

将_config.yml文件中的配置项post_asset_folder设为true
执行命令$ hexo new post_name
在source/_ posts中会生成文章post_name.md和同名文件夹post_name
将图片资源放在post_name中，文章就可以使用相对路径引用图片资源了。

![](image.jpg)

标签插件语法引用

相对路径的图片显示方法在博文详情页面显示没有问题，但是在首页预览页面图片将显示不出来。如果希望图片在文章和首页中同时显示，可以使用标签插件语法。

# 本地图片资源，不限制图片尺寸
{% asset_img image.jpg This is an image %}
# 网络图片资源，限制图片显示尺寸
{% img http://www.viemu.com/vi-vim-cheat-sheet.gif 200 400 vi-vim-cheat-sheet %}

HTMl语法引用

<img src="SpellCheck.png" width="50%" height="50%" title="拼写检查工具Grammarly." alt="拼写检查工具Grammarly."/>

直接将![](image.jpg)替换上面的语法

fancybox：点击查看大图

NexT主题中提供了fancybox的方便接口

{% img http://www.viemu.com/vi-vim-cheat-sheet.gif 600 600 "点击查看大图:vi/vim-cheat-sheet" %}

Hexo部分图片禁用fancybox
hexo在使用fancybox插件时，图片的效果还是很可观的，
但是我们往往是不需要所有的图片都用fancybox；
例如：hexo next主题下，添加某些图片的时候，有些事不需要可点击的
修改theme\next\source\js\src\utils.js

diff --git a/source/js/src/utils.js b/source/js/src/utils.js
index 0f3704e..8516665 100644
--- a/source/js/src/utils.js
+++ b/source/js/src/utils.js
@@ -11,6 +11,7 @@ NexT.utils = NexT.$u = {
       .not('.group-picture img, .post-gallery img')
       .each(function() {
         var $image = $(this);
+        if ($(this).hasClass('nofancybox')) return;
         var imageTitle = $image.attr('title');
         var $imageWrapLink = $image.parent('a');

在img标签使用的时候加上class=”nofancybox”即可

<img src="http://xxx.xxx.com/xxx.gif" class="nofancybox" />

图片懒加载

只在需要的时候加载图片，而不是一次性加载完成，加快速度，适用于图片较多的博客

安装
在博客根目录执行命令安装插件

npm install hexo-lazyload --save

配置
在博客根目录的配置文件_config.yml中添加下列代码

lazyload:
  enable: true
  onlypost: false #是否只在文章中开启懒加载
  # className: #可选 e.g. .J-lazyload-img
  # loadingImg: #可选 eg. ./images/loading.png 作为图片未加载时的替代图片