侧边栏壁纸
博主头像
Ysfun博主等级

一名热爱技术、喜欢折腾的小小程序猿

  • 累计撰写 42 篇文章
  • 累计创建 14 个标签
  • 累计收到 21 条评论

目 录CONTENT

文章目录

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

Ysfun
2022-06-17 / 0 评论 / 0 点赞 / 35 阅读 / 863 字

1. 问题描述

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

2. 初步探索

  1. 更改typora设置

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

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

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

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

  1. 安装图片路径转换插件
# **注意:插件不能安装最新的,安装老版本的**
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中的内容全部替换成下面的内容,其中/为博客根目录 。

'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();
    }
  }
});

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

0

评论区