在文章中插入图片的各种方式

终于还是没能避免想要在文章中用到图片，所以有了本文记录在Hexo博客中插入图片的各种方式

本地引用

安装插件

安装插件hexo-asset-image

npm install hexo-asset-image --save

安装成功后，打开/node_modules/hexo-asset-image/index.js，替换成下列内容：

'use strict';
var cheerio = require('cheerio');

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {
return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
    var link = data.permalink;
if(version.length > 0 && Number(version[0]) == 3)
    var beginPos = getPosition(link, '/', 1) + 1;
else
    var beginPos = getPosition(link, '/', 3) + 1;
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);
var toprocess = ['excerpt', 'more', 'content'];
for(var i = 0; i < toprocess.length; i++){
var key = toprocess[i];

var $ = cheerio.load(data[key], {
    ignoreWhitespace: false,
    xmlMode: false,
    lowerCaseTags: false,
    decodeEntities: false
});

$('img').each(function(){
if ($(this).attr('src')){
// For windows style path, we replace '\' to '/'.
var src = $(this).attr('src').replace('\\', '/');
if(!/http[s]*.*|\/\/.*/.test(src) &&
    !/^\s*\//.test(src)) {
    // For "about" page, the first part of "src" can't be removed.
    // In addition, to support multi-level local directory.
    var linkArray = link.split('/').filter(function(elem){
    return elem != '';
    });
    var srcArray = src.split('/').filter(function(elem){
    return elem != '' && elem != '.';
    });
    if(srcArray.length > 1)
    srcArray.shift();
    src = srcArray.join('/');
    $(this).attr('src', config.root + link + src);
    console.info&&console.info("update link as:-->"+config.root + link + src);
}
}else{
console.info&&console.info("no src attr, skipped...");
console.info&&console.info($(this));
    }
});
data[key] = $.html();
    }
}
});

绝对路径

当整个博客图片内容较少时，可将所有的图片都放在source/images文件夹下，通过markdown语法访问。

![](/images/img1.png)

对于图片较少切命名清晰的情况，这种方式存放图片足够。

相对路径

方法

除了将图片存放在source/images文件夹下，还可以将图片存放在文章自己的目录中。文章目录可通过修改配置文件生成：

post_asset_folder: true  

将配置文件中post_asset_folder修改为true后，执行命令

hexo new post newblog

会在source/_posts生成newblog.md和同名文件夹newblog。将图片存在该同名文件夹中，即可通过相对路径的方式在文章中添加图片。

![](img.png)

这一方法能够在文章中显示图片，但无法在首页正常显示图片，如需在首页显示图片可使用如下方式：

{% asset_img img.png This is an image %}

当图片内容较多，使用相对路径存放图片的方式更易于整理。

小提示

如遇到修改配置文件后运行hexo new newblog命令无法正常建立一个同名文件夹，可以手动在_POST目录下建立一个同名文件夹，仍能够达到同样的效果。
实际上，md文件也可以手动新建。根据使用者的习惯，怎么新建md文件和同名文件夹都是可以的。
平时写文章不常用到图片，也可以使用手动建立同名文件夹的方式。

CDN引用

将图片上传到一些CDN服务中并使用对应的url地址引用图片也是一个很好的方式。

参考

[1] Hexo博客搭建之在文章中插入图片
[2] 在Hexo博客中插入图片的各种方式
[3] hexo博客中插入图片失败——解决思路及个人最终解决办法
[4] 解决 Hexo 框架博客图片不显示的问题