Hexo博客Markdown文章插入图片方法总结

在网上查了一下有以下几种方式往Hexo博客Markdown文章中插入图片

本地引用

绝对路径

当Hexo项目中只用到少量图片时,可以将图片统一放在source/images文件夹中,通过markdown语法访问它们。对于source/images/image.jpg这张图片可以用以下语法访问到

1
![](/images/image.jpg)

图片既可以在首页内容中访问到,也可以在文章正文中访问到。

相对路径

图片除了可以放在站点统一的source/images文件夹中,还可以放在文章自己的目录中。文章的目录可以通过配置博客站点目录下的_config.yml来生成。

1
post_asset_folder: true

将 _config.yml 文件中的配置项 post_asset_folder 设为 true 后,执行以下命令新建Markdown文章

1
# hexo new post_name  # 新建Markdown文章,post_name即 是文章的标题,也是文件名.

之后会在站点的 source/_posts 中会生成文章文件 post_name.md 和同名目录 post_name 。将图片资源放在post_name中,文章就可以使用相对路径引用图片资源了。posts/post_name/image.jpg这张照片可以用以下方式访问:

1
![](image.jpg)

上述markdown的引用方式,图片只能在文章中显示,但无法在首页中正常显示。

如果希望图片在文章和首页中可以同时显示,可以使用标签插件语法。_posts/post_name/image.jpg这张照片可以用以下方式访问:

1
{% asset_img image.jpg This is an image %}

其中,image.jpg 是图片的文件名, This is an image 是一个描述信息,可不写。

注意:用以上方式访问时,在Markdown的编辑器中无法预览效果。

CDN引用

除了在本地存储图片,还可以将图片上传到一些免费的CDN服务中。因国内访问github速度较慢,所以将图片放到国内图床上,然后引用外链是常用的方法。
常用图床总结:https://sspai.com/post/40499

图床,也就是专门提供存储图片的地方,我们只要通过图床提供的 API 接口,把图片上传上去,就可以通过外链访问了,根本不用操心图片是怎么存的,硬盘空间不够了,硬盘坏了,访问速度比较慢等等问题,这些图床都会帮我们搞定,他们会用各种技术帮我们做图片相关的优化和服务,比如多机互备、CDN 加速、图片处理、图片鉴黄、文本识别等等。

当然,图床也是有缺点的,当所有人都把图片存在同一个图床上,万一有一天图床真挂了,那所有图片就都无法访问了,虽然这种情况的概率很低,但并不等于不会发生

目前图床可以分为两种,一种是公共图床,一种是自建图床。公共图床也就是利用公共服务的图片上传接口,来提供图片外链的服务,比如新浪微博。自建图床,也就是利用各大云服务商提供的存储空间或者自己在 VPS 上使用开源软件来搭建图床,存储图片,生成外链提供访问,比如七牛、Lychee 开源自建图床方案。

  1. 微博图床(Chrome浏览器有个“新浪微博图床”插件,可以自动生成markdown链接)简单方便
  2. 七牛:需要注册且实名认证等太麻烦,放弃
  3. 腾讯云等云存储服务,需要先将照片放到云盘,然后找到超链接,然后粘贴到文章。太麻烦,放弃。
  4. 【强烈推荐!!!】ipic 工具,具体用法请谷歌,支持监控剪贴板,一键上传到微博图床,免费版默认是微博图床,支持七牛云等

使用GitHub

使用github存储博客图片

  1. 创建一个空的repo
  2. 然后将图片push到repo中
  3. 点击图片进去,有个download,右键复制链接
  4. 将链接插入文章,如下所示
1
![logo](https://github.com/xxxx/xx.jpg)