Hexo解决图片加载问题

发表于 | 分类于 | | 热度: ℃ |

自从主题改成next之后，发现图片加载出了问题
本地绝对引用以及html的img标签都失败了。。

图片相对路径加载出错

按照网上教程，查看插件

config设置

post_asset_folder: true

安装插件

  1. 重新按照插件
    npm install hexo-filter-image --save

1-1 遇到问题，显示：

1
2
found 22 vulnerabilities (17 low, 1 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details

2.1 继续尝试
npm audit fix

2.1 -1 显示问题

1
22 vulnerabilities required manual review and could not be updated

2.2 强制执行及重新安装

1
2
npm audit fix --force
npm instal

2.2 -1 显示失败

2.3.1 重新安装及更新node

1
brew install node

2.3.2 npm升级 失败
npm install npm -g

  • 先安装n
    npm install n -g
  • 显示失败
    Missing write access to /usr/local/lib/node_modules/n
    • 解决方案
      sudo
    • 更新成功，安装了最新版的npm

继续安装插件，失败，啊！！！！！！！！！

结果

最终未解决问题，啊啊啊啊啊啊啊啊！！！！！！！！！！！！

此时我的心情非常爆炸啊！前前后后好几个月陆陆续续没找到原因，还花了好多时间，今天又花了好多时间，试了好多方法，啊！！！！

重新梳理

重新启程，从前端野页面查看，发现从blog中查看图片样式显示，发现路径多了”.io”

所以问题是，图片引用的路径错误啊！

解决方法

文件地址：node_modules/hexo-asset-image/index.js

将img内容替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('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);
      }

!(hexo 图片路径错误/.com//)[https://segmentfault.com/q/1010000020310187/a-1020000020311907]

绝对图片路径

在查找问题的过程中，发现了有其他的办法加载图片，记录如下

  • 插件开启

    1
    2
    _config.yml
    post_asset_folder: true

  • 图片插入格式

    1
    2
    3
    {% asset_path slug %}
    {% asset_img slug [title] %}
    {% asset_link slug [title] %}

看起来就不是很方便的亚子

!(官方文档)[https://hexo.io/zh-cn/docs/asset-folders]

交个盆友