# 问题

$\quad$ 在 Hexo 中，最简单的调用本地图片的方法，就是在 source 目录中新建一个 images（名字可自定义）文件夹，将图片都存入 images 文件夹中，然后在 Markdown 中使用 ![图片名字](图片地址) 的格式，比如我们当前有一个名为 image1.png 的图片，就是 ![image1](/images/image1.png) ，这里的 / 是指的根目录，而 Hexo 中，资源文件的根目录就是 source 文件夹。但这样不方便管理是一种问题，更重要的是当我想把博客部署到 gitee 上时，需要将 _config 中的 url: http://example.com 更改为：

url: http://li-one-three.gitee.io
root: /underoneumbralla/

更改后本地图片就无法显示了。这个原因是什么我不知道。

# 解决

$\quad$ 一个不算优雅的解决方法是：

安装插件 npm install hexo-asset-image --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();
    }
  }
});

完成上两步后。那么要想插入本地图片，只需要在 md 文件的同级目录中新见一个同名的本地文件夹，将图片放入其中。之后在 md 文件中直接 ![](图1.png) 引用即可。（图 1 为图片名称）

# 仍然有的问题

$\quad$ 但 ![](图1.png) 这样的引用可以在 hexo 生成的网站中看到图片，却没能在 vscode 的预览中显示。若想在 vscode 的预览中显示需要将写成 ![](文件夹名称/图1.png) ，但这样的引用法在网站中却无法显示。