Hexo博客插入图片的方法

hexo blog 插入图片的方法总结

hexo 的blog 内容是根据 markdown 文件的内容生成的html文件, 生成的文件全部在 /public 文件夹中, 所以我们使用相对路径的引用可能导致问题, 总结了一下常用的引用图片的几种方式,记录一下,避免再次忘记

1. 绝对引用: 使用 /source/images 文件夹
2. 相对引用: 使用 post_asset_folder:true 建立文章同名文件夹
3. CDN 或者图床引用

1. 绝对引用

少量使用图片的时候使用, 将文件放在 /source/images 文件夹下, 使用 markdown 语法 ![Lena](/images/lena.png) 可以实现图片显示, 但是这种引用在本地markdown 编辑器中会无法预览,因为相对路径不一致,找不到文件, 不过在首页内容和文章正文中都能正常显示,十分方便

Lena

个人使用的方法就是这种, 由于自己很少插入图片, 但是存在一个问题,后续可能维护起来麻烦, 不知道哪里引用了哪个图片,导致文章删除但是图片仍在, 很麻烦

2. 相对引用

在站点配置文件*/_config.yml* 中配置指令 post_asset_folder: true 这样在每次新建文章的时候就会建立同名文件夹, 直接将相应的文章图片放在文件夹内 使用 语法 ![Lena](Hexo博客插入图片的方法/lena.png) 可以访问同名文件夹下图片资源,十分方便

Lena

3. 在线资源

在线图片

如果我们要的图片现在网络上已经存在了,我们找到相应的地址直接引用就好
可以只用标准markdown 图片语法引用相关图片 ![百度图片--lena](http://images2018.cnblogs.com/blog/1003156/201806/1003156-20180604175546711-227291592.png)

例如

百度图片

CSDN 图片

博客园图片

维基百科图片

自己做的图

如果我们要的图只是我们自己画出来的图,或者生成的图,可以使用在线图床上传之后得到链接使用,

个人感觉最好用的图床是 sm.ms, 点击上传之后可以得到各种链接,十分方便, 最终给出的链接比如 https://i.loli.net/2019/11/09/KDut86ljxM9TXnP.png 的形式

刚刚上传了代码的一段截图 得到链接在这里测试使用

39-53 行内容截图

图像样式自定义

对于markdown 插入的图片,可能不是很满足自己的需求,需要进行一定的图片调整,比如图片居中或者图片大小控制 相应的各家markdown 的编辑器有自己的实现规则,但是在hexo blog 中我们对于图片的处理一般是转为直接 做html 处理, 比如

1. 使用img 标记来控制图片显示大小
   图片大小控制
   <img src="http://t.zoukankan.com/images/lena.png" height="50%">

2. 使用div 加上css 来控制图片的显示和大小
   <div style=" 200px; margin: auto">![Lena](/images/lena.png)</div>

3. Hexo 中扩展 Markdown 语法设置图片的大小 blog 中自己写了一个控制显示的方法,可以参考

更多

个人目前使用的方法1
但是后续可能要换成方法2 更加方便管理图片以及后续可能的迁移过程, 希望对看到的你们有一点帮助.

参考链接

1. 在Hexo博客中插入图片的各种方式
2. Hexo博客搭建之在文章中插入图片
3. hexo博客图片问题
4. Hexo插入图片和设置图片大小
5. Hexo 中扩展 Markdown 语法设置图片的大小