Hexo+Github博客：网站内图片不能正常显示，但本地文件可以显示

@Author：CSU张扬
@Email：[email protected] or [email protected]
@我的网站: https://www.faker.top

1.1 问题描述

markdown文件中，插入图片的方式为 ![](文件路径) ，此时markdown文件可以正常显示图片。
但是一上传到博客上，便不能正常显示。

1.2 解决办法

1. 修改 hexo 目录下的 .config.yml 文件，
   将 post_asset_folder: false 修改为 post_asset_folder: true。

2. 安装一个图片路径转换的插件。
   在hexo文件夹下打开 Git bush。输入

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

   注意： 这是经过修改的插件代码，网上流传的另一份代码 npm install https://github.com/CodeFalling/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();
   }
   }
   });
   

3. 安装完上述插件后，当我们创建新文章时 hexo new post "new article" ，就自动在 new article.md 文件的同目录下创建一个同名的文件夹，这里就是文件夹 new article 。我们把在 new article.md 使用的图片放入该文件夹中。
   我们的文件目录如下所示：

   |- _post  
   |    |- pictures
   |    |    |- hexo.png
   |    |- new article  
   |    |    |- hexo.png  
   |    |- new article.md
   

4. 这里我们给出两种办法来引用图片。

   1. 直接使用代码 ![](hexo.png) （虽然没有写文件夹的名字，但是可以的），hexo.png 是我们存在 new article 文件夹内的图片。这时你会发现markdown预览中无法显示这张图片，但是当你将博客上传到网站时，网站上是可以正常显示的。
   2. 使用代码 ![](new article/hexo.png)不仅可以本地预览，上传到网站也可以正常显示。
   3. 本地无法预览也是件很不舒服的事情，其实我们还可以另外创建一个文件夹 pictures ，里面专门存放所有文章的图片，代码 ![](pictures/hexo.png) 不仅可以本地预览，上传到网站也可以正常显示。

   注意： 不管采取哪种办法，都要创建一个和md文件同名的文件夹，里面放上需要的图片。
   如果 2和3 中代码无法实现网站上的正常显示，那就使用 1 中的代码。
   因为 2和3 中代码我无法保证每个人都成功。

参考：
Ericam_：hexo引用本地图片无法显示
Jesse-jia：解决Hexo图片无法显示问题