问题描述：
此问题是我在更新Hexo后发现的。利用hexo-asset-image并无法显示图片。查看网上资料，有的说是Hexo 3版本后的兼容性问题，但大多都是语焉不详的粘贴复制，并不能解决问题。而经过一番ballache的折腾后，发现问题在于hexo-asset-image的源码中，下面给出具体的解决方案。 ## 解决方案： 首先贴出Hexo及使用的库的详细版本，此解决方案至少针对当前环境可用，大家可自行修改环境。 package.json文件内容： 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{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "4.2.1"
},
"dependencies": {
"hexo": "^4.2.1",
"hexo-asset-image": "^1.0.0", 这个需要安装，同时设置_config.yml文件中的hexo-asset-folder: true
"hexo-asset-link": "^2.0.1",
"hexo-deployer-git": "^2.1.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-index": "^1.0.0",
"hexo-generator-tag": "^1.0.0",
"hexo-image-link": "0.0.3",
"hexo-inject": "^1.0.0",
"hexo-renderer-ejs": "^1.0.0",
"hexo-renderer-kramed": "^0.1.4",
"hexo-renderer-pandoc": "^0.3.0",
"hexo-renderer-pug": "^1.0.0",
"hexo-renderer-stylus": "^1.1.0",
"hexo-server": "^1.0.0"
}
}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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71'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;
}
hexo.extend.filter.register('after_post_render', function(data){
var config = hexo.config;
if(config.post_asset_folder){
var link = data.permalink;
var beginPos = getPosition(link, '/', 3) + 1;
var appendLink = '';
// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
// if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
if(/.*\/index\.html$/.test(link)) {
// when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
// image in xxtitle/ will go to xxtitle/index/
appendLink = 'index/';
var endPos = link.lastIndexOf('/');
}
else {
//var endPos = link.lastIndexOf('.'); 修改位置1，修改为var endPos = link.length-1;
var endPos = link.length-1;
}
link = link.substring(beginPos, endPos) + '/' + appendLink;
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)
|| /^\s*\/uploads|images\//.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('/'); 修改位置1，修改为src = '/'+ srcArray[srcArray.length-1];
src = '/'+ srcArray[srcArray.length-1];
$(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();
}
}
});1
2
{% asset_img Image1.png 图1 %}1
2
3
4
5
6
7
8修改处1，修改为true后，每次new blog的时候都会在md文件的目录下生成同名的blog文件夹，然后图片都放到该文件夹里面就可以了，这个百度搜搜就都有更详细的介绍。
post_asset_folder: true
修改处2，把url改成你的github的网址，这个用github做blog仓的都知道是啥地址。
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://你的名字.github.io
root: /
问题解决过程
1.首先百度问题关键字，解决方案统统无效，但至少在这个阶段更新了Hexo版本...... 2.chrome中F12，在开发者模式下研究无法显示的图片的元素。 
发现路径不对，图片中的可能跟你的不一样，但总而言之就是地址有问题。 3.在hexo-asset-image的github页面中的issues里发现有人提出同样的问题，然后看到说是源码的地址处理的问题。虽然开发者发现了问题，但是npm安装的依旧有问题。于是乎最简单的解决方法就是自己改index.js的源码里地址生成的部分。