# 问题

\quad 在两个月前把博客上传到 gitee,遇到的本地图片显示问题解决后,仍然有一个问题一直没能搞定: ![](图1.png) 这样的引用可以在 hexo 生成的网站中看到图片,却没能在 vscode 的预览中显示。若想在 vscode 的预览中显示需要将写成 ![](文件夹名称/图1.png) ,但这样的引用法在网站中却无法显示(详细戳这里)。但今天花费了数个小时,总算是优雅地解决啦!

# 解决方案

\quad 解决方法参考了这里。解决方法是注册了一个在文章渲染之后的过滤器 (Filter),它会在每一篇文章被渲染后触发。它会在解析后的 HTML 中找到所有的 img 元素,获取它们的 data-src 属性(这应该是图像的路径),并根据一系列规则修改这个路径。使得 ![](文件夹名称/图1.png)![](./文件夹名称/图1.png) 在 hexo 里会等效成 ![](图1.png) 。这样就解决了在 hexo 显示本地图片与 vscode 预览不相容的问题!十分优雅地解决了!

# 具体解决操作

  1. 在主题文件夹 themes/shoka/scripts/helpers/ 下新增脚本 image_path_wrap.js (名字随意叫啥都行)
  2. 贴入如下完整代码,这就完成了过滤器的注册。
t
'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 这样的。这些都是不正确的。虽然我完全不会前端,但利用 AI\text{AI},我还是捣鼓出了上述这一段正确的过滤器代码。在这个过滤器作用下,图片的地址 https://li-one-three.gitee.io/underoneumbralla/2024/03/06/在窝里/小碎文/用一个简单的神经网络寻找参数关系/图1.PNG 终于是正确啦!