Hexo无法显示图片的问题

最新推荐文章于 2024-05-08 18:52:03 发布

lessCoder

最新推荐文章于 2024-05-08 18:52:03 发布

阅读量1.1k

点赞数 1

分类专栏： Hexo 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/lessCoder/article/details/128090728

版权

Hexo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

MD编辑器采用的是Typora

图片存放位置设置如下：

用typora，这样直接向其内拖图片即自动生成同名文件夹，并将图片放在文件夹中。如图所示

HEXO官方关于图片引用的说明

资源文件夹 | Hexo资源（Asset）代表 source 文件夹中除了文章以外的所有文件，例如图片、CSS、JS 文件等。比方说，如果你的Hexo项目中只有少量图片，那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说，Hexo也提供了更组https://hexo.io/zh-cn/docs/asset-folders

可看可不看，不推荐官方的图片外挂标签的引用方式（这种方式MD编辑器不识别），还是推荐使用下面的插件来引用（可以直接拖入typora即可）。

HEXO插件hexo-asset-image

这个插件基本上都要自己去手动修改的!!!

注意：该插件支持abbrlink，所以会有不少问题，需要自己手动去调整。

hexo-asset-imag的安装：

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

_config.yml配置：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

MD编辑器采用的是Typora

图片存放位置设置如下：

编辑

用typora，这样直接向其内拖图片即自动生成同名文件夹，并将图片放在文件夹中。如图所示

编辑

HEXO官方关于图片引用的说明

可看可不看，不推荐官方的图片外挂标签的引用方式（这种方式MD编辑器不识别），还是推荐使用下面的插件来引用（可以直接拖入typora即可）。

HEXO插件hexo-asset-image

这个插件基本上都要自己去手动修改的!!!

注意：该插件支持abbrlink，所以会有不少问题，需要自己手动去调整。

hexo-asset-imag的安装：

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

_config.yml配置：

//只开启这个就够
post_asset_folder: true

//下面这个不用管，有些人文件中没有下面2个，这个是上面官网复制加进去的，没啥用。
marked:
  prependRoot: true
  postAsset: true

在hexo clean；hexo g后， public/下会有如下文件：

然后注意路径：

如果路径不对，要修改插件hexo-asset-image的源码

该插件的作用其实是将引用的md代码转换成html可以识别的代码。

如果安装了abbrlink，那么我们自己会修改permalink字段，这就导致hexo-asset-image插件不能够有效的处理我们自定义的permalink。所以我们需要修改其js文件。

在node_modules中找到hexo-asset-image.

打开index.js

不要直接复制这个代码！除非你的permalink是按照我的方式去做的：

Hexo 中permalink使用 Hexo-abbrlink生成唯一永久文章链接及小优化_lessCoder的博客-CSDN博客下面的这些，根据不同版本，其写法不太一样。https://blog.csdn.net/lessCoder/article/details/127858588源码解读：（不要复制这个代码，需要自己修改）

重点是第58行左右的这个代码：

$(this).attr('src', config.root + link + src);

其中

config.root是空字
src是图片名称

link是permalink（在_config.yml中）经过处理后得到的，其正确的结果应该是B的名称。

我的permalink原本的结果被处理成了：

20221118035946-40e9fbf0.htm //注意，此处没有 “l”。所以这就导致了网页中对图片的引用变成了：

20221118035946-40e9fbf0.htm/1669668679430.png

显然，正确的应该是：

20221118035946-40e9fbf0/1669668679430.png

所以，js处理的时候给我截取不足，因此我修改了（大约是23行）：

//我的显然是走进了else里面的，所以endPos直接原字符串长度－5即可
    else {
      // var endPos = link.length-1;
      var endPos = link.length-5;
    }

然后结果就正确了，可以正常显示了！

以下为备份：

'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;
    var appendLink = '';
    // In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
    // if not with index.html endpos = link.lastIndexOf('.') + 1 support hexo-abbrlink
    if(/.*\/index\.html$/.test(link)) {
      // when permalink is end with index.html, for example 2019/02/20/xxtitle/index.html
      // image in xxtitle/ will go to xxtitle/index/
      appendLink = 'index/';
      var endPos = link.lastIndexOf('/');
    }
    else {
      // var endPos = link.length-1;
      var endPos = link.length-5;
    }
    link = link.substring(beginPos, endPos) + '/' + appendLink;

    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)
            || /^\s*\/uploads|images\//.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);
            // $(this).attr('src', config.root + src);
            // $(this).attr('src', src);
            console.info&&console.info("update link as:-->"+config.root + link + src);
            // console.info&&console.info("[LAOBU]:-config.root->" +config.root );
            // console.info&&console.info("[LAOBU]:link-->" + link );
            // console.info&&console.info("[LAOBU]:src-->" + src);

          }
        }else{
          console.info&&console.info("no src attr, skipped...");
          console.info&&console.info($(this));
        }
      });
      data[key] = $.html();
    }
  }
});