解决hexo搭建博客图片不显示问题

发表于 更新于 分类于 阅读次数： 评论数： 本文字数： 3k

1. 问题描述

最近使用hexo搭建博客时，使用typora编辑完博客，在hexo上部署时发现图片都不能正常显示。图片采用复制粘贴的方式插入到.md文件中，图片格式：

2. 初步探索

  1. 更改typora设置

按照网上的教程，先修改typora图片插入设置，打开typora设置 -> 图像，按照下面方法设置。

  1. 修改配置文件，打开资源文件管理功能

把博客根目录下的_config.yml中的post_asset_folder: 设置为true

Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

  1. 安装图片路径转换插件
1
2
3
4
5
# **注意：插件不能安装最新的，安装老版本的**
npm install https://github.com/EricGerry/hexo-asset-image-0.0.5.git --save

# 采用以下语句安装会出错
npm install hexo-asset-image --save

注意：按照npm install https://github.com/EricGerry/hexo-asset-image-0.0.5.git --save语句安装完成后无需进行后面的步骤！！！


执行完上述操作，按照网上大多数的说法都是可以正常显示图片的，但很无奈，经过这番配置后，重新部署仍出现这样的结果：

当场崩溃！！！

3. 大功告成

经过一大番折腾，在网上查阅各种大佬的帖子，最后发现是是这个图片路径转换插件hexo-asset-image有问题，需要进行修改。把文件/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
61
62
'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();
    }
  }
});

重新部署！图片正常显示！！！完美

相关文章