Hexo博客图片插入问题踩坑记

Hexo博客的图片插入问题很大,现在网上大部分搜出来装hexo-asset-image插件的做法是没必要的,本篇教程给出的方法能够成功插入图片,并能在写博客时实时看到图片。不想看其他错误方法直接跳到解决方法四。

问题

本地图片插入(像Typora,Marktext之类的)用的本地绝对路径或相对路径多多少少都出现了博客上看不见图片的情况。

解决方法一:网络图床(弃用)

使用PicGo搭配Typora、Marktext之类的md编辑器,可以很方便的将图片上传Gitee、Github、OSS等图床,教程网上随便搜。

网络免费图床不稳定且管理不方便,像Gitee图床挂了,Github其实也是有要求不可以做图床的(访问还慢,jsdelivr挂了之后),收费图床还是存在管理问题,访问量太大的话费用也不低,最后还是想了想去折腾本地图片的插入。

解决方法二:hexo-asset-image(archived了,且没必要,弃用)

网上大部分教程要npm安装hexo-asset-image,完全没必要,在Hexo的Github issues中我发现官方回复高版本的Hexo中已经内置了插入图片的方式,这个插件本身貌似也有问题

解决方法三:官方标签引用(无法实时预览,弃用)

将Hexo的配置文件打开,更改以下内容:

1
post_asset_folder: true

这样每次使用hexo new "postname"生成新博客文件时都会在_post文件夹下创建一个同名postname文件夹。

如果我们在上述文件夹放了一个图片abc.jpg,那么就可以在postname.md文件中直接用![](abc.jpg)来引用图片,或者用官方的标签{% asset_img abc.jpg description_of_abc %},能够正确显示在网页上。(原理是这个图片在hexo g时被复制到了public文件夹,生成时的html标签是直接从public文件夹里引用的图片)

但是这样做有一个问题,在写博客的时候,没法实时看到图片,因为![](abc.jpg)这种引用在markdown中没法定位到postname/abc.jpg的。

解决方案四:hexo-asset-img插件

有位大神做了插件hexo-asset-img,直接npm install hexo-asset-img --save

这个插件是对解决方案三的改进,首先要将Hexo的配置文件打开,更改以下内容:

1
post_asset_folder: true

这样每次使用hexo new "postname"生成新博客文件时都会在_post文件夹下创建一个同名postname文件夹。

如果我们在上述文件夹放了一个图片abc.jpg,与解决方案三不同的是,我们在md中可以正常使用![abc](postname/abc.jpg)来插入图片,写博客时就能看到图片,但如果生成博客就显示不出来图片。

现在问题很简单,怎么能在生成时将![abc](postname/abc.jpg)转化成官方的标签格式{% asset_img abc.jpg description_of_abc %},大神写的插件(上面安装那个)就是做了这件事。

所以我们只要保证图片在同名文件夹中,在md中使用相对路径![abc](postname/abc.jpg)来插入图片就可以让图片成功出现在博客中!

至于怎么保证图片在同名文件夹中,在Typora等md编辑器的偏好设置里,将图像设置成插入时复制到指定文件夹,或者自己每次将图存到该文件夹都可以,这就方法多了!

注意:这个插件有个bug,如果图片描述是数字1,会在生成html时被转换成width="1",导致看不见图片,Github issues中我看到其他人已经提了,暂时插件没有解决,我们使用时就别用数字描述图片好了

到此为止,终于可以好好写博客了。