Hexo 图片不显示

---

title: Hexo 图片不显示
date: 2019/6/6 8:38:25
updated: 2019/6/10 20:45:30
comments: true
tags:

• Hexo 图片不显示
  categories: javaStudyPlan

---

Hexo 图片不显示

在搭建Hexo Blog 过程中出现了图片不显示，现记录起解决的方法：

一.插件安装与配

首先我们需要安装一个图片路径转换的插件，这个插件名字是hexo-asset-image

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

打开_config.yml文件，修改下述内容

post_asset_folder: true

测试：

在blog 目录中右键打开命令行

#清除缓存
hexo clean
#开起服务，并选debug 模式
hexo server --debug
#看图片是否会显示成功

注：如以下方法不能解决图片显示问题

请按下以修改文件：

打开/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;
}

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;
    // 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();
    }
  }
});

Hexo 最常用的几个命令

hexo s

hexo s

启动本地服务器，用于预览主题。默认地址： http://localhost:4000/

• hexo s 是 hexo server 的缩写，命令效果一致；
• 预览的同时可以修改文章内容或主题代码，保存后刷新页面即可；
• 对 Hexo 根目录 _config.yml 的修改，需要重启本地服务器后才能预览效果。

hexo new

hexo new "demo"

新建一篇标题为demo的文章，因为标题里有空格，所以加上了引号。

hexo d

hexo d

自动生成网站静态文件
hexo d 是 hexo deploy 的缩写，命令效果一致。

hexo clean

hexo clean

清除缓存文件 db.json 和已生成的静态文件 public 。
网站显示异常时可以执行这条命令试试。

hexo g

hexo g

生成网站静态文件到默认设置的 public 文件夹。

• 便于查看网站生成的静态文件或者手动部署网站；
• 如果使用自动部署，不需要先执行该命令；
• hexo g 是 hexo generate 的缩写，命令效果一致。

hexo new page

hexo new page aboutme

新建一个标题为 aboutme 的页面，默认链接地址为 主页地址/aboutme/

​