Hexo图片显示问题

在Hexo搭建的时候遇到了奇葩的问题，网上的hexo-asset-image也下载了，用Markdown原生的图片引用方式引用，发现主页的预览界面可以正常显示，但是点进文章里面就显示不了了。

而在用了asset文件夹的方式之后，（在页面同目录下创建一个同名文件夹放图片），结果令人哭笑不得————变成了页面内正常显示，主页无法显示了。

问题原因

笔者对Hexo了解不深，如果有类似经历的或者懂得hexo主页和文章渲染时具体原理的大佬可以在评论区交流一下

解决办法

首先还是需要安装hexo-asset-image插件的，在hexo博客的根目录文件夹打开git bash，输入

npm install https://github.com/CodeFalling/hexo-asset-image --save

或者

npm install hexo-asset-image --save

在Hexo图片相关 - 文章显示、主页显示、修改fancybox一文中，作者提到自带的asset-image有bug，可以尝试在根目录中找到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();
    }
}
});

在hexo的_config.yml中将post_asset_folder设置为true，以后使用hexo new命令来创建网页的时候就能在source/.post文件夹下（与网页的index文件在一起）看见一个同名的文件夹，将需要的图片全部放到这个文件夹中。

（像我一样半路才开始打开post_asset_folder的也可以选择自己创建一个同名文件夹）

之后在网页文件中使用

{% asset_img 只用修改这里.jpg %}

方式来引用即可实现主页和文章部分均能成功显示图片。