Hexo-博客文章插入图片

Hexo 博客文章插入图片

Hexo博客插入图片

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

本地引用

绝对路径

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

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

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

相对路径

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

1
post_asset_folder: true

将_config.yml文件中的配置项post_asset_folder设为true后,执行命令$ hexo new 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 %}

虽然可以正常引用图片了,但是这种引用图片的方式太过复杂,所以引入图片插件解决。

图片插件:
插件hexo-renderer-marked解决了这个问题。使用如下:

1
2
3
4
5
6
7
8
npm install hexo-renderer-marked

用该命令直接安装,之后在config.yaml中更改配置如下:

post_asset_folder: true
marked:
prependRoot: true
postAsset: true

问题:使用该插件后生成的图片路径不正确,在路径中重复使用文章路径
解决:找到插件 hexo-assert-image 安装位置(插件都在node_modules文件夹下)
Hexo-assert-image
如上图,红框3打印了完整的图片路径,红框1是获取src路径,经过对比发现src路径获取时重复,所以增加红框2的解决办法,完美解决编译后图片路径不正确的问题

之后就可以在使用

1
![](image.jpg) 

这种方式愉快的插入图片了。

CDN引用

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

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

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

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

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

使用GitHub

使用github存储博客图片

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