hexo的图片以及图床

简介

hexo要插入图片一般有两种方式：

存储在本地的网站文件夹
使用图床，插入时用外链url即可

本地

先说第一种，hexo本地和上传到GitHub后的目录结构不相同，所以这路径是比较难编写的。要想最后部署后能看到图片，在本地写markdown时，图片就会显示失败。有没有什么两全其美的方法呢？有。

hexo-asset-image

先将 _config.yml 的post_asset_folder改为true，然后运行以下命令：

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

安装完成后，新建文章后，将会是这种结构：

hexo搭建github技术博客
├── hexo_1.png
└── hexo_2.png
hexo搭建github技术博客.md

这样的目录结构（目录名和文章名一致），只要使用 ![](hexo搭建github技术博客/hexo_1.png)就可以插入图片。

同时，生成的 html 是

<img src="/2017/03/27/hexo搭建github技术博客/hexo_1.png" alt="查询福昕">

而不是之前丑陋的相对链接。

另外，值得一提的是，这个插件对于 CodeFalling/hexo-renderer-org 同样有效。以上的内容参考在 hexo 中无痛使用本地图片。

七牛云图床

看网上很多人都推荐七牛云，我自己没用过别的，就直接用了。每个月有10G免费，我的博客应该没人来看，是够用的。

然后是镜像存储，什么是镜像存储呢？

镜像存储是指你网站的数据在存储在自己服务器上的情况下，额外使用七牛云存储作为镜像服务器，让网站的用户每次访问的时候都从七牛云存储上读取。如果七牛云存储上没有用户需要读取的数据，则七牛的服务器会从源站拉取资源，然后再返回给网站的用户。

网站上的图片，CSS，JS 这些文件一般都是不太修改，使用镜像存储把这些静态文件资源镜像到七牛的服务器，网站用户访问的时候就直接从七牛的服务器上读取数据，这样可以大大降低网站服务器读取数据的压力和大大提高网站的速度，并且并不影响博客的原来使用体验，原来怎么上传图片还是继续在网站中怎么操作即可。

镜像源填自己的网站，这样设定之后，每次更新网站的内容后，就可以通过七牛云给的三级域名+相同路径访问到自己网站的相同内容（我的是image.rexking6.top）。

总结

关于图片的使用方法，就写到这里，对七牛云这家公司突然心生敬佩，刚好在春招，投一发实习简历去！