hexo-asset-image生成本地图片链接错误
Angulu Lv1
2020-12-09 13:37:32 1.6k 字 6 分钟

文章图片存放选型

在安装好Hexo和把主题设置完成后，想在自己的文字里面添加一点图文说明，这样可以更好的表达文字旨意。那么如何让hexo生成的静态网页里面插入图片呢？
其实就是遵循markdown的语法可以有三种方式把图片插入到文章中:

  1. 本地图片
    本地图片的插入，其实说白了，就是图片和我们生成的网页在同一个服务器下面（也就是说网页可以通过相对路径可以访问到图片）
  2. 网络图片
    网络插入的方式，你可以直接引用网络找到的图片（也就是一条网络链接，直接可以访问到图片），也可以自己绘制的图片通过图床的方式（也是生成一条可以访问的图片来访问这个图片）
  3. 存到markdown文件中
    这种方式是紧紧的把图片和网页联系在一起，这个方式的好处就是不用担心链接失效的问题。

这三种方式，经过我的一些考虑后，最后决定使用本地图片的方式来对文章的引用图片。下面给出我选择本地图片存储的理由和各种方式引用图片的步骤。

为什么选择本地图片方式

主要还是因为节约成本和文章资源比较好整理，还有我怕麻烦，当我们看到一些比较旧的文章的时候，是不是有遇到过图片加载失败，有些说明没有图片的辅助让人很难理解作者想要表达的意思？对的，我就是想规避这类的问题，希望当我的服务器停止的时候，文章和图片共存亡，哈哈哈哈…..减少让人看了摸不着头脑的文章，提高文章的体验度。

如何插入本地图片

这个是这篇文章说的重点，也演示在这个过程中遇到的一些坑，和填坑的过程。

  • 安装hexo-asset-image插件
    1
    npm install https://github.com/CodeFalling/hexo-asset-image -- save
  • 配置 _config.yml
    在hexo初始化目录下找到 _config.yml 文件(注意是根目录的，不是在themes目录下)，打开并修改属性 post_asset_folder: true
  • 新建一篇文章
    1
    hexo n "测试文章"
    执行上述命令后，你的 xxx\source\_posts\ 文件夹下就生成了如下一个 md 文件和同名的文件夹
    演示2
    这样你就可以通过把图片放在这个文件夹下面，然后通过markdown语法来愉快的插入图片了
    1
    ![图片描述](文件夹的名称/带后缀的图片文件名)

    小插曲

    凡事都不可能一帆风顺，除非你充了VIP。初次接触这个怎么可能没有遇到这个问题呢？一步三个坑，这个插曲就是一个坑…
    经过一顿操作，hexo生成网页后，高兴的打开页面，发现
    演示3
    小朋友心中产生了很多个问号,好奇的按下了F12查看图片链接
    演示4
    我……..这……..，不对图片的链接不是由 hexo-asset-image生成的吗？
    赶紧顺着hexo-asset-image的问题方向查找，果然…有bug..
解决方案

找到hexo-asset-image的入口js文件
演示5
把其替换如下js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
'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();
    }
  }
});

然后执行hexo如下指令，就可以在本地愉快的预览到图片啦！

1
hexo cl && hexo g && hexo s

注意:清理缓存，生成网页，启动服务

如何插入网络图片

插入查网络图片就比较简单了，你只需要拿到一个你想要展示的图片的链接即可，那怎么拿呢？
盘点国内免费好用的图床
可以通过这个选一个自己喜欢的，然后通过引用就可以把图片应用到文章里面来啦！

1
![这里写图片的说明](把这里换成图床给你的链接吧)

如何插入图片到markdown到文章中

这种方式比较合适对小图片的处理，原因是一些现成的图片转Base64的工具对大小有限制和网页加载的时候，图片太大，可能会对网页整体的加载速度产生影响。
这里推荐网址，用于把图片转换成Base64的工具。
图片转Base64数据
直接上传即可:
演示1
然后通过markdown的语法引入到文章中

1
![这里写图片的说明](这里就把生成的Base64的数据直接粘贴上来)

虽然这么操作是可行的，但是你直接在文章中插入一大段的Base64数据肯定很难受，所有非要用Base64的方式插入图片的同学建议如下操作：

  1. 将Base64数据放在文章的最后面并且对其命名一个id名字
    1
    [image_id]:data:image/png;base64,iVBOR...(省略表示)
  2. 在文章中引用这个id来插入图片
    1
    ![这里写图片的说明][image_id]

演示的配置信息

演示6