hexo博客中插入图片失败——解决思路及个人最终解决办法

1、前言

今天晚上花了大概1个小时在晚上搜寻各种hexo博客插入图片无法显示的解决办法,很多方法是重叠的,所以真正不同的解决方法并不多。

尤其让我有些惊讶的是不同的几篇博客,内容根本完全一样,就是纯粹的copy,虽然说明了转载(注明转载的话往往还放在最后一句,这种东西不应该开篇说明最好吗?),但是我觉得直接给出链接不就可以了吗?为何还要完全从头到尾copy一遍?而且多少加上一些自己的理解,稍微修缮一下原博文,这样不断转载的版本也会越来越好。

闲言碎语多扯了一点。本回答受该博客启发较大。

2、解决方案

2.1 创建图片资源文件夹

网上有关的解决方式几乎很大一部分会提到这一点:将_config.yml 文件中的post_asset_folder 选项设为 true 来打开。事实上这正是hexo官方文档给出的解决方案之一中的一个步骤。仔细阅读后会发现如下几点:

  1. 该操作的作用就是在使用hexo new xxx指令新建博文时,在相同路径下同步创建一个xxx文件夹,而xxx文件夹的作用就是用来存放图片资源;
  2. 就我个人而言,我偏好于直接在source\_posts文件夹下新建md文件,而不是通过hexo new xxx指令;
  3. 那么直接新建xxx.md再新建xxx文件夹,这种操作的最终效果和使用hexo new xxx指令新建博文的效果一样吗?经过实测,是一样的。

基于以上3点,告诉大家几个结论:

  1. 新建博文可以不用hexo new xxx指令,我较为推荐直接新建文件和文件夹的方式,只要达到一个md文件,一个同名文件夹的效果即可;
  2. 【将_config.yml 文件中的post_asset_folder 选项设为 true 】是必须的!理论上既然没用hexo new xxx指令,文件夹也是我自己新建的,这一步设置的意义似乎并不存在,但是后文介绍的插件必须在post_asset_folder 选项设为 true的情况下才能生效——本人亲测,大家记住这么设置即可

2.2 typora中图像设置

一般来说,大家会现在typora里写好md格式的博客,然后通过hexo cleanhexo ghexo s进行一下本地测试,确认无误后再发布到远端。

暂且不说hexo博客的图片插入是个问题,我相信当初单纯利用typora做笔记时,图片文件的管理就让很多人头疼过,typora官方似乎也意识到这个问题,所以偏好设置图像是专门的一项,提供了很多选择。

在这里插入图片描述我相信大多数同学写md时的图片很多可能是直接截图或者在其他地方copy的,然后在typora中直接粘贴就ok了。但是这么做之前最好把typora插入图片时采取何种操作配置好,否则md文件和图片相隔十万八千里,后续一旦移动md文件图片就识别不出来,相信大家用过typora都深有体会。

所以接下来讲一下typora如何设置。直接给结论:
在这里插入图片描述框里的路径是:./${filename}./表示当前文件夹,${filename}表示当前文件名。这么设置的好处:

  1. 图片资源文件夹有了;
  2. 而且是同名文件夹!(2.1中的文件夹其实不用手动添加了)

这么设置的结果就是:想写篇博客,在source\_posts文件夹下新建xxx.md文件,写着写着需要插一张图,从别处复制,然后在typora中直接粘贴,bling!图片资源文件夹自动搞定,并不用关心什么文件夹,只管专注于md文件即可。

2.3 插件下载

这个很多博客也有提到,插件的名字叫hexo-asset-image,相信在网上找了一波解决方案的同学一定对这个名字不陌生。

这个插件的不同版本可能会有不同的影响,我最终成功解决问题的版本是用如下命令下载的:

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

为什么需要这么插件呢?

因为我们虽然在source\_posts文件夹下写了md文件,也有了图片资源文件夹存了图片,但从我们前面typora中的设置不难知道,实际上md文件中的图片路径都是相对路径(./${filename})。而实际网上看到的博文显然不是md文件,而是html文件,从md到html的转变就是hexo帮我们做的,还记得hexo g命令吗?就是干这个的。转换后的html文件在public目录下,路径是通过日期指示的。

下面第一张图是存放md文件的地方,图片就在图中的jiangzhou文件夹中;第二张图是generate之后存在html和图片资源的地方。
在这里插入图片描述
在这里插入图片描述
大家如果了解过html的话,应该知道里面的图片应该是指定绝对路径的,大家可以打开上面第二张图的index.html,找到插入图片的地方,查看是否是可用的绝对路径,我的如下图。大家如果问题还没解决的话应该不是像我一样的日期+文件夹指明的绝对路径。
在这里插入图片描述说到这儿,大家应该知道,理论上需要将md中图片的相对路径转换成html中的绝对路径,这样图片才能正常显示。因为我们图片资源也有了,显示不出来只能是路径不对(为验证,大家图片显示不对的话,打开index.html,插图片地方的路径肯定是一串不明所以的字母数字)。

路径转换就是该节最开始提到的插件的作用:根据md图片的相对路径,给出html中图片的绝对路径。

2.4 修改md图片路径

经过前面typora的设置,大家粘贴图片到typora应该是这种画风:
在这里插入图片描述
在这里插入图片描述路径:md文件名/图片名
图片资源文件夹:自动生成且同名。

这时如果用hexo cleanhexo g生成html文件,用Notepad++或其他工具打开index.html(路径见下方第一张图),找到插图片的地方,查看图片路径(见下方第一张图):
在这里插入图片描述在这里插入图片描述发现图片路径似乎多了一串07/07/test!如果用hexo s在本地查看网页,会发现是下面这个样子:
在这里插入图片描述点开那个未加载的图:
在这里插入图片描述
继续点The image

在这里插入图片描述
可以发现这里显示的路径和我们在html文件源码中看到的是一致的,既然觉得路径重复,那么我们就把重复的删了试试看:

在这里插入图片描述图片显示出来了!

既然是路径问题,那么是不是插件有问题?或者我们使用方法错了?

找到插件安装位置(插件都在node_modules文件夹下),打开readme文件(怎么是1985年的?!(*/ω\*)
在这里插入图片描述readme如下:
在这里插入图片描述瞬间发现别人的说明书讲得明明白白,言简意赅!我们的转化后路径不对正是因为我们md文件中图片的路径不对,图片名前面不能有其他东西!

在这里插入图片描述删去test/(这样md中图片就没法正常显示了),重新hexo cleanhexo ghexo s测试——
在这里插入图片描述
本地网页显示如下:
在这里插入图片描述发布到远端我这边也没什么问题,至此该问题算是解决了。主要就是编译(我姑且称之为编译,有点那个味道)前需要在md中把图片的路径都删去前面的xxx/,图片一多可能还是有些繁琐,但目前还没有找到更好的替代方法。

小结

在这里插入图片描述
找解决方案找了一个多小时,写这篇博客好像写了2个多小时。感觉应该把整个过程讲得还算比较清楚了。

但是这种问题向来因人而异,同样的解决方法可能可以解决我的问题,但对另一个人无效。还是要多查找资料,多尝试,多思考。

评论 20 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页

打赏作者

_小江_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值