一、一般解决思路
1. 安装图片插入路径转换的插件 hexo-asset-image
npm install hexo-asset-image --save
2. 在hexo的__config.yml中开启功能
writing:
post_asset_folder: true
3. 当创建文章时,会自动在文章同一目录下生成同名文件夹,将图片放入。
假设我要插入的图片名字为1.jpg,放在博客主目录source文件夹下的XXX文件夹里。 了解到有两种方式在文章中插入图片。
 //md语言的插入图片
{% asset_img 1.jpg "这里是图片描述" %} //hexo内置插入图片的方式
二、实际问题
1. 两种方式都无法正常显示
- 在网页源代码中找到图片位置的源代码
<p><img src="/.pink/2020/04//1.jpg" alt></p>
我的域名为 mysite.pink 这里的图片路径就成了 mysite.pink.pink…
该路径存在bug,导致浏览器无法找到该文件。
- 在仓库中找寻图片的文件。
正确上传,路径如同预计。判断是生成html时出现bug。
2. 解决
npm i hexo-permalink-pinyin --save #安装此插件可以生成文章的拼音路径,解决链接转码导致的路径问题。
判断是图片路径插件的问题。搜索到一位博主的文章。他贴出了自己对插件的修改
/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();
}
}
});
————————————————
版权声明:本文为CSDN博主「Ericam_」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xjm850552586/article/details/84101345
3. 再次尝试
在文章中使用两种不同方式插入相同图片。
hexo相对路径插入资源,正确显示。
md语言插入图片,依然失败。
三、姑且算是解决问题了。
收工恰饭,敲打总结。示例:一段文字
参考文章: