hexo无法显示本地图片的问题

朱兴学
2023-12-01

hexo使用markdown语法无法正常显示本地图片问题的解决办法如下:

step1:下载hexo-asset-image插件

在站点根目录下,执行以下命令下载hexo-asset-image插件:

$ npm install hexo-asset-image --save

step2:修改站点配置文件_config.yml

把站点配置文件_config.yml中的post_asset_folder选项设为true,这样以后每次执行`hexo new aaaa`新增文章命令时,都会在`_posts`目录下生成`aaaa.md`文章和`aaaa`文件夹,md文章中引用图片使用相对路径格式,如下:

![logo](aaaa/logo.png)

 这样在vscode编辑模式下既可以正常预览本地图片,同时,在执行完`hexo clean;hexo g;hexo s`命令运行服务后,网页端也能正常显示本地图片。

注意,今后如果修改了`aaaa.md`文件名,记得要同步修改同名文件夹。

step3:修改hexo-asset-image插件的bug

如果本地图片还不能正常先试试,说明`hexo-asset-image`插件的bug仍未修复,需要修改站点目录下`node_modules\hexo-asset-image\index.js`文件,找到if(/.*\/index\.html$/.test(link)) { 字段,大概在17行左右,添加对应的else if字段,如下:

if(/.*\/index\.html$/.test(link)) {
  ...
}
else if (link.charAt(link.length - 1) === '/') {
  // link 是文件夹路径情形时
  var endPos = link.length - 1;
}
else {
  ...
}

找到$('img').each(function()){代码段,将其中的

$(this).attr('src', config.root + link + src);
console.info&&console.info("update link as:-->"+config.root + link + src);

改为相对路径引用:(此步可以不改,即generate后的站点采用的是绝对路径引用图片)

$(this).attr('src', src);
console.info&&console.info("update link as:-->" + src);

改完后再执行`hexo clean;hexo g;hexo s`命令运行服务,浏览器就可以正常显示本地站点的图片了。可以打开站点public\年\月\日\aaaa路径下的index.html查看,可以发现本地图片png相关的引用链接都正常了。

 类似资料: