关于Hexo写博客时的图片插入问题（OSS对象存储+PicGo搭建图床）

81 阅读 0 评论 54 点赞

我是靠谱客的博主欣慰绿草，最近开发中收集的这篇文章主要介绍关于Hexo写博客时的图片插入问题（OSS对象存储+PicGo搭建图床），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

关于MarkDown

MarkDown是一种轻量级标记语言，它可以导出HTML、WORD、图像、PDF、EPUB等多种格式的文档。使用MarkDown写文章有如下好处：

MarkDown可以在任何地方使用，兼容MacOS、Windows、Linux等平台
博客网站比如简书、GitHub、CSDN，GitChat等都支持MarkDown，所以只需要写一个MarkDown文件，并通过将文件上传至各平台就可以实现在多个博客网站发表文章
专注文字内容而不是排版样式，不同于Word等软件需要考虑设置排版
正宗的官方技术文档都是使用MarkDown书写的，使用MarkDown写文章有助于熟悉其语法，提升自己写文档的能力
写作的过程也是思考的过程，写文章不仅有助于加强自己对所涉及内容的进一步熟悉与认知，还能提升自己的语言组织能力与写作水平

综上所述，收益无穷！

使用MarkDown的相关问题

在写文章的时候，我们可以插入图片和相关资源使得文章更加丰富生动，但是在本地写MarkDown文件时，上传的本地图片是无法实现在网络上或是在另外一台设备上访问的。

比如上面这张图片是我截图然后粘贴的，文件存放在电脑本地，如果直接发布到Hexo自己的博客网站，或者是CSDN，简书等博客平台是无法访问的，又或者是我们将MarkDown文件发给别人时，对方也是无法查看插入的本地图片的。

那么在使用Hexo框架写我们的文章时，怎么实现在网络上看到我们插入的图片呢？这里我主要介绍两种方法，分别都是我实现过的，在这里总结经验。

办法一：同名目录 + 相对路径

在使用Hexo写博客时，每一篇文章创建一个同名目录，并在这个同名目录中放置需要插入的图片文件，在MarkDown文章中插入使用图片的相对路径，然后在部署博客的时候也一同将这个文件夹上传到服务器。
1. 修改配置文件_config.yml使得每一次新建文章的时候自动生成同名目录。
```
post_asset_folder: true
```
2. 修改MarkDown编辑器配置，实现粘贴图片时自动将图片文件复制一份到所对应的同名目录。
  
  我使用的Typora编辑MarkDown文件，通过ctrl + , 打开Typora的设置，并按图片中完成相关设置。
```
./${filename}
```
  完成这样的设置后，每当我们在Typora中粘贴图片的时候就会将图片复制到同名目录下。
  
  但是需要注意的是，这样上传到Hexo依旧不能解决图片无法访问的问题，因为图片的路径还是本地的路径，只是这个图片所属的本地的文件夹是和文章同名的。
  
  解决办法：将绝对路径变成相对路径，这样在Hexo服务器上就会自动的在与文章同名的那个文件夹里面找图片文件，所以只需要删去前面的一部分，只留下图片的文件名。
  
  由于当前MarkDown文件内的所有插入的图片都自动地放在一个文件夹里，所以他们的路径的前缀都是一样的，可以使用Typora的快捷操作将前缀全部替换成空白。
  
  具体方法：ctrl + H打开替换
  
  总结这个方法：
  1. 本地看不到图片的效果，但是上传至Hexo后是可以查看的，能解决Hexo上查看本地图片的问题。
  2. 但是仍然不能解决Hexo以外的诸多博客平台的本地图片访问问题，对于CSDN、简书来说它都有自己的图床，所以可以上传到对应平台的图床，然后用网络的链接访问图片。
  3. 使得Hexo文件变得臃肿，随着博客文章的积累，用到的图片会在每次部署和上传到服务器时一并被携带上传，造成部署和上传的压力，使得上传的速度变得很慢。
  4. 由于博客部署在GitHub Pages，就会导致加载博客文章时，一大部分时间用于请求Github Pages服务器加载图片文件，再加上Github Pages服务器在大陆访问有时很慢的情况，使得博客网页加载奇慢无比。
  综上，这个办法并不是长久有效的。