# 问题
在两个月前把博客上传到 gitee,遇到的本地图片显示问题解决后,仍然有一个问题一直没能搞定: ![](图1.png)
这样的引用可以在 hexo 生成的网站中看到图片,却没能在 vscode 的预览中显示。若想在 vscode 的预览中显示需要将写成 ![](文件夹名称/图1.png)
,但这样的引用法在网站中却无法显示(详细戳这里)。但今天花费了数个小时,总算是优雅地解决啦!
# 解决方案
解决方法参考了这里。解决方法是注册了一个在文章渲染之后的过滤器 (Filter),它会在每一篇文章被渲染后触发。它会在解析后的 HTML 中找到所有的 img 元素,获取它们的 data-src 属性(这应该是图像的路径),并根据一系列规则修改这个路径。使得 ![](文件夹名称/图1.png)
或 ![](./文件夹名称/图1.png)
在 hexo 里会等效成 ![](图1.png)
。这样就解决了在 hexo 显示本地图片与 vscode 预览不相容的问题!十分优雅地解决了!
# 具体解决操作
- 在主题文件夹
themes/shoka/scripts/helpers/
下新增脚本image_path_wrap.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; | |
} | |
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 = ''; | |
if (/.*\/index\.html$/.test(link)) { | |
appendLink = 'index/'; | |
var endPos = link.lastIndexOf('/'); | |
} | |
else { | |
var endPos = link.lastIndexOf('/') + 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('data-src')) { | |
var src = $(this).attr('data-src').replace('\\', '/'); | |
if (!(/http[s]*.*|\/\/.*/.test(src) | |
|| /^\s+\//.test(src) | |
|| /^\s*\/uploads|images\//.test(src))) { | |
var srcArray = src.split('/').filter(function (elem) { | |
return elem != '' && elem != '.'; | |
}); | |
if (srcArray.length > 1) | |
srcArray.shift(); | |
src = srcArray.join('/'); | |
$(this).attr('data-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.png)
的图片地址是像 https://li-one-three.gitee.io/underoneumbralla/2024/03/06/在窝里/小碎文/用一个简单的神经网络寻找参数关系/用一个简单的神经网络寻找参数关系/图1.PNG
这样的。用了参考后的代码,图片的地址就会变成像 https://li-one-three.gitee.io/图1.PNG
这样的。这些都是不正确的。虽然我完全不会前端,但利用 ,我还是捣鼓出了上述这一段正确的过滤器代码。在这个过滤器作用下,图片的地址 https://li-one-three.gitee.io/underoneumbralla/2024/03/06/在窝里/小碎文/用一个简单的神经网络寻找参数关系/图1.PNG
终于是正确啦!