使用Hexo的同学都知道，Hexo的博客使用本地图片真的是非常麻烦，经常显示不出来，虽然本站最开始都固定死位置的，即本地位置和上传到服务器后位置不一样，文档里面地址适配具体位置，时间长了根目录下面的图片文件夹图片越来越多，也不好管理。鉴于博客本身生成后产生了一个目录，应该是可以使用的。

使用的问题

先简单说下Hexo博客图片的问题，当我们写博客的时候，如果不是绝对的网址方式，如图床等方式，那么我们在引用本地图片的时候，对应的代码大概如此

![comment](xxx.png)

但是这个图片经过Hexo生成之后，并不会将图片拷贝到最终目录，而且如果图片没有一定的存放规则，最终会非常难管理。

解决方案

首先参考了官网 https://hexo.io/zh-cn/docs/asset-folders.html

里面有解决方案，但是这种不是markdown的语法的东西非常恶心，弃之。

继续搜索，发现 hexo-asset-image 这个插件是实现这个功能的，那么直接通过NPM安装这个插件，总结一下，首先启用资源拷贝功能，在 _config.yml 中，修改

post_asset_folder: true

然后在使用的时候，首先需要通过 hexo n xxx 创建新博客的时候，会创建同名 xxx 的目录，相关的资源文件放里面即可，当然这个目录也可以手动创建，最终大概目录结构如下

./test.md
./test/
./test/bg.png

在博客中引用的时候，就按正常的引用方式引用即可，如

![](test/bg.png)

但是直接这么实现，我发现并没有成功，然后参考 https://www.jianshu.com/p/3db6a61d3782

原来是兼容性问题，卸载刚安装的插件，安装参考中作者的修改版本

npm uninstall hexo-asset-image
npm install https://github.com/7ym0n/hexo-asset-image --save
hexo clean && hexo g

然后基本OK了，然后F12查看了地址，虽然可以访问了，但是地址却是带域名方式的，通用性不好，查看了作者的实现逻辑，确认是字符串切割问题，然后在 _config.yml 中修改网站地址从 https://xilixili.net 修改为 xilixili.net，不带 http(s) 头，重新生成就好了。

本站遗留问题

前面博客 网页自适应显示WebP图片 https://xilixili.net/2017/02/07/webp/ 中对WebP的支持实现了特殊的处理，因此这个插件还需要再特殊处理一下，在 Github 上 fork 源码修改一下，在原代码处理 img 标签的后面复制一份相同的处理方法，进行对应的修改，如下

$('source').each(function() {
    if ($(this).attr('srcset')) {
        var src = $(this).attr('srcset').replace('\\', '/');
        if (!/http[s]*.*|\/\/.*/.test(src) && !/^\s*\//.test(src)) {
            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('srcset', config.root + link + src);
        }
    }
});

也可以直接安装我修改后的版本，支持 img 和 source 标签等

npm install https://github.com/rangerlee/hexo-asset-image --save