Hexo博客添加图片不显示问题

本想在自己文章中加入图片进行详细说明,奈何这图片偏要与我玩躲猫猫死活不出来,在网上看了几篇博客之后才得以解决,浪费了一些不必要的时间。所以在这里记录一下,希望以后遇到这问题可以快速解决。 🚴

  1. 安装插件
    在博客文件所在位置,右键->打开git bash后键入

    1
    npm install hexo-asset-image --save

    安装完成后,使用命令hexo new 'test'新建文章时,会在test.md同目录(_post)下生成同名文件夹,该文件夹可用于存放对应文章的图片等相关信息
    当然,你也可以手动创建与新建文章同名的文件夹。

  2. 修改配置文件
    把站点配置文件_config.yml的 post_asset_folder设置为 true
    在blog(hexo)目录下执行 npm install hexo-asset-image --save

  3. 引入图片格式
    使用markdown的格式引入图片:![你想要输入的替代文字](存放图片的文件夹名称/图片名.jpg)

提示:通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。如果你也恰好遇到该问题,可以使用下方标签解决:

1
{% asset_img example.jpg This is an example image %}
  1. 执行hexo g -d 生成页面并部署后查看图片是否正常显示

  2. 如果以上步骤都确认执行完成但图片还是很有个性,千呼万唤不出来。那么到/node_modules/hexo-asset-image/index.js文件更换为如下内容:

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
'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博客添加图片不显示问题

文章作者:xugz

发布时间:2019年10月25日 - 13:52

最后更新:2021年09月11日 - 16:40

原始链接:https://xlline.github.io/2019/10/25/Hexo-addpic/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。