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

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相关的引用链接都正常了。

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值