前言

细数过去，总共使用了如下三种方式：

使用Hero-admin插件在线编写博客，配合插件上传图片。
使用Typora等工具本地编写博客，用相对路径引用，配合PicGo搭配第三方图床或者自建图床使用。
使用第三方平台（CSDN）编写博客并发布。

图片插入是一个很重要的问题，而我会用这一篇文章来向你介绍我的推荐方案，兼整理我的失败经历。

这里会涉及到远程部署，第三方云图床等名词，可能初看不太懂，但是无妨的，下一篇就会帮你部署到远程仓库的。

时隔四年，重启Hexo历险计划！

Hexo历险记之七展示图片

首先，你要确定你的编写风格，使用的工具是本地的还是在线的；要求展示效果是本地文档有图片，或者是要远程部署，甚至是多平台发布；以及你愿意为保存图片这个功能所花费的心理预期。

以我为例，我现在的风格是本地用Typora编辑文档和保存图片，只是在部署的时候，才会将图片上传到我的远程服务器。对应的博客结构就是如下图。

截屏2022-07-27

所有待编写的博客都放在hexo/source/_drafts/文件夹内，等编写好以后，将文件手动剪切到hexo/source/_posts/文件夹下，部署远程服务器。再将编写完成的文档复制一份到hexo/source/_url/文件夹内，用Typora自带的图片上传功能一键将所有图片都上传到第三方图床，将图片相对链接更新为第三方图床链接，再去其他的平台上面进行发布。

我解释一下原因，之所以不用在线插件Hero-admin进行云端编辑，是因为有遇到过编写了内容且点击了保存，但是刷新页面后两千多字不翼而飞的情况。当时的Hero-admin插件版本太低了，我那时候能力也弱小，没法子去优化他，所以放弃了在线编辑的方案。现在看他也更新了很多版本，但是毕竟有阴影存在，所以不做推荐。

不使用第三方平台的在线编辑，原因有两个。第一是因为他们的在线编辑功能不够强大，编写的时候会遇到缺少功能的情况。当然，现在都2022年了，几个大平台的在线编辑已经很可靠了。但另一点是在我写完一段内容后下意识按Ctrl+S保存，会弹出保存网页的提示框，这是很打断思路的。毕竟最一开始我做团支书的时候习惯了Word文档随时保存，这个问题让我很难接受这个解决方案。

看展示效果的话，就要问你是什么时候才会翻出来老的博客内容进行查阅。比如我就是在本地编写，所以必须要有实时解析图片链接为图片内容的功能。再有，我部署后的博客是我分享给同学的内容，也必须要有图片内容。至于多平台发布，那么选择图床和如何快捷上传就是要解决的问题。

为保存图片所愿意花费的心理预期，这并不夸张，因为多的是有博主购买阿里云的对象存储服务，价格从前半年每月5.5到以后每月11块。如果是跟博主相似的白嫖党，可以选择自建图床。

资源文件夹方案

缺点就是需要手动管理图片，即使用工具完成自动复制，生成的相对路径也需手动修改一次才可以解析。所搭配的插件还需要单独修改，对新手不友好。

修改配置

修改博客根目录下的_config.yml文件，以打开文章资源文件夹功能。

post_asset_folder: true

致敬hexo的中文官方文档。

需要搭配有hexo-asset-image插件，将会在你每一次创建新文章时自动创建一个同名文件夹。我们只需要把一个example.jpg图片放在了你的资源文件夹中。可以使用标准语法![](/example.jpg)或者Hexo标签来显示在文章中，但它将不会出现在首页上。

安装插件

进入博客根目录，用命令下载插件。

cd F://myblog
npm install hexo-asset-image --save

正确的引用图片方式是使用下列的标签插件而不是Markdown语法。

{% asset_img example.jpg This is an example image %}或者是
{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

但是，博主这里两个方式没有成功……气！文字代表我的心！(╯‵□′)╯︵┻━┻

参考周冰烽的博客，才知道原来是插件版本有问题。直接去hexo-asset-image的GitHub官网，看看人家是怎么使用这个插件的。

还是1.0.0的版本，找到了\node_modules\hexo-asset-image\index.js文件，把里面的内容进行替换成为Issue的解决方案文件即可正常使用了。

![test2](example.jpg)

使用图床方案

使用图床的话，其实核心就是两点，选择合适的云图床与选择合适的上传方案。

接下来我就会细数自己使用过的几个云图床，依次介绍他们的优缺点，和操作步骤。

先说最优解，我认为是阿里云OSS，不论是技术支持还是访问速度，都很棒！但是昂贵的价格让我望而却步，尤其是在刚开始写博客的时候，三个月写不出来二十篇博客，但是每个月都在花钱。

其次是使用Gitee或者是Github这种开源仓库，好处就是相信域名不会轻易改变，缺点就是一个仓库容量只有500M。再有，GitHub常常在我们不知情的情况下将代码私有化并重新包装，详细查看相关八卦内容的可以度娘搜索SFC和Github。所以现在除了极少的代码还在Github上面，其他的都迁移到Gitee了。Gitee没有任何通知就加上了防盗链，现在已经没有办法再用Gitee做图床了。

接着是购买服务器之后，在上面自建图床。Chevereto是一个开源的图床工具，使用Docker配置可以很方便的部署下来，该趟的坑我也走过一遍了，大家可以参考我的另一篇文章：Docker系列八自建图床。但是缺点有两个。其一就是会被自己服务器的硬件配置所限制，比如我的服务器就是最差的丐版，硬盘总共才只有40G。当然，以个人为例，写了两百多篇文章总共也不到1G，使用三四年是没有问题的。猛一看是在杞人忧天，但与阿里云OSS的百G容量相比，的确是缺点。其二就是迁移服务器了，最难过的就是改换域名，由于域名与访问链接是直接绑定的，当我改换域名的时候，所有文档都要重新修正才可以。

最后才是七牛云图床，因为会需要许多的敏感信息来实名认证，而怀疑论总是围绕着他们。明显的，我那时候注册后好多垃圾短信和电话轰炸我，生气的脸都黑了，就完全放弃这个产品了。

上传工具最出名的就是PicGo。PicGo是用 Electron-vue 开发的软件，可以支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 等多种常用图床，功能强大，简单易用。而且它也有命令行级别的Api可以调用，搭配本地文档编辑工具很是快捷方便。附上picgo下载链接。

再或者不要工具，直接使用大佬的Python脚本上传图片也可以，但是博主尝试后失败了，还是博主能力弱小了些。

阿里云OSS（贵，放弃）

未来如果有机会的话我会尝试使用阿里云的oss

image-20220727205209146

好好像要掏钱的样子....怂！

仔细看还是要掏很多钱的样子……逃！

自建图床Chevereto

详细的安装和部署步骤我写在了另一篇文章里，大家可以参考我的另一篇文章：Docker系列八自建图床。这里只是记录了使用PicGo工具本地上传图片获得链接。

picgo-命令行

PicGo-Core的命令行只有在需要上传图片时才会启用一个进程。

首先运行命令下载插件picgo，安装成功后，查看安装的位置和版本，继续使用picgo安装插件chevereto。

# 下载picgo
npm install picgo -g# 查看安装的位置
which picgo# 查看版本
picgo --version# 安装插件
picgo install chevereto

image-20210808223533673

image-20210808224504369

注意：PicGo命令行的配置文件在指定路径中。

C:\Users\Administrator\.picgo\config.json

将配置文件修改成为如下内容，即可完成Chevereto的配置。

{"picBed": {"current": "chevereto"，"uploader": "chevereto"，"chevereto": {"key": "上面从api里面获得的密钥"，"source_param": "source"，"url": "https://www.images.clzly.xyz/api/1/upload"，"url_param": null}}，"picgoPlugins": {"picgo-plugin-chevereto": true}
}

Typora集成PicGo-Core命令行

修改Typora上传服务为自定义命令模式，内容如下。

: node picgo upload
/Users/keen/.nvm/versions/node/v10.16.2/bin/node /Users/keen/.nvm/versions/node/v10.16.2/bin/picgo upload

image-20210808225909410

他的使用方式有两种。第一种是针对单个图片的，在编辑的过程中，右键某个图片，会有一个上传图片的选项，点击之后，就是会自动上传，并且修改图片的Url。

image-20210808230731735

第二种是针对本文档的所有图片，在编辑完整个文档之后，点击格式->图像->上传所有本地图片来一次性的将整个文档的图片都转成第三方链接。

image-20220728005007770

image-20210808231229885

picgo-客户端

首先需要下载picgo。

image-20220728121024749

其次，打开后，手动安装插件chevereto。

image-20210808212601546

接着，从图床的控制台，拿到Api的密钥信息，在图床设置中配置插件的Url和Key。

注意：Url的格式必须是 域名地址+/api/1/upload

image-20210808173829503

image-20210808215134627

最后，编写文章的时候，就可以先将图片用PicGo的客户端，上传到自建图床上面，之后将图片成功上传后的Url黏贴在文章的指定位置即可。

注意：PicGo客户端的配置文件在指定路径中。

C:\Users\Administrator\AppData\Roaming\PicGo\data.json

Typora集成pico

需要 PicGo ≥ 2.2.0 并启用PicGo-Server，使用默认值 (36677) 的端口。

当Typora使用PicGo客户端上传图片时，PicGo 将被启动并保持运行。

在Typora的偏好设置->图片服务->上传服务中选择PicGo(app)，填入客户端在本地的路径，点击验证。

image-20210808231714394

相较于使用脚本的区别，就是会在右下角有一个上传成功的提醒。

image-20210808231618156

Python脚本（失败）

这个方式完全舍弃了PicGo的工具，只是一个脚本就完成了想要做的事情，让我很是心动，但是在尝试的时候，一直失败，很是无奈。

在这里简单记录一下，以后有机会再继续深入研究好了。

创建配置文件D:\blog\blog-keen\bat\config.json内容如下。

{"APIKEY": "上面从api里面获得的密钥"，"url": "https://www.images.clzly.xyz/api/1/upload"，
}

创建上传文件D:\blog\blog-keen\bat\upload.py内容如下。

#!/usr/bin/env python3
# -*- encoding: utf-8 -*-
# author: guiu
# data: 2020.2.28import requests
import json
import mimetypes
import argparse
import sysAPP_DESC = """
一个上传图片到chevereto图床的命令行工具
"""# print(APP_DESC)
if len(sys.argv) == 1:sys.argv.append('--help')parser = argparse.ArgumentParser()
parser.add_argument('-s'， '--source'， type=str， nargs='+'， help=""， required=True)
parser.add_argument('-c'， '--config'， default="./config.json"， help="读取配置文件"， required=True)
args = parser.parse_args()# 从参数中获取要上传的文件列表
img_list = args.source
# print(img_list)def read_conf(path):with open(path，"r"，encoding="utf-8") as f:confstr = f.read()conf = json.loads(confstr)return confdef up_to_chevereto(img_list):# 获得本地图片路径后，上传至图床并记录返回的json字段for img in img_list:# 先判断传过来的是本地路径还是远程图片地址if "http" == img[:4]:# 非本地图片的话可以考虑下载到本地再上传，但是没这个必要print(img)continueelse:try:res_json = upload(formatSource(img))# print(res_json)parse_response_url(res_json，img)except:print(img+"\t上传失败")def upload(files):# 图床api# APIKey = "THERE PUT YOUR APIKEY"conf = read_conf(args.config)url = conf['url'] + "?key=" + conf['APIKEY']# print(url)r = requests.post(url， files=files)return json.loads(r.text)def formatSource(filename):imageList = []mime_type = mimetypes.guess_type(filename)[0]imageList.append(('source'， (filename， open(filename， 'rb')， mime_type)))# print (imageList)return imageListdef parse_response_url(json， img_path):# 从返回的json中解析字段if json['status_code'] != 200:print("{}\tweb端返回失败. status_code {} ，mesage为\n\r{}.".format(img_path， json['status_code']，json['error']))else:print("keen2")img_url = json["image"]["url"]print(img_url)up_to_chevereto(img_list)

修改Typora的自定义命令为如下内容。

: 格式python upload.py -c config.json -s
"D:\all_sdk\python\python.exe" "D:\blog\blog-keen\bat\upload.py" -c "D:\blog\blog-keen\bat\config.json" -s

我在尝试的时候，发现request模块，在发送post请求的时候，一直会报错误，说我的上传文件为空。奈何自己对request模块学艺不精，一直没办法实现，只好以后再继续尝试了。

{'message': 'Empty upload source.'， 'code': 130， 'context': 'Exception'}.

七牛图床

需要注册一个七牛云的账号并进行实名认证。会要求，需要使用邮箱验证，身份证号，身份证正反面照片，支付宝授权等敏感信息！而且实名认证需要一定的审核时间。

再有，必须要有域名，也就是折腾备案。图片链接也有有效期。

注册和配置

附上注册地址。

完成注册之后创建存储服务。

image-20201028134814542

我创建了名为keen1的服务，选择公开存储之后配置一个融合CDN域名。控制台中点击创建域名，域名类型选择普通域名，其他配置默认或根据需求优化配置。由于当时博主使用的阿里云域名注册，所以把这个域名的cname绑定到自己的域名管理。

image-20201028135312794

image-20201028135850905

校验操作

在本地命令行使用命令，尝试该域名能否访问。出现下图即为成功。

nslookup www.image.clzly.xyz

image-20201028140435778

密钥对

AccessKey和SecretKey是访问和操作对象存储的密钥对。其中AccessKey会在传输中包含，而用户必须保管好SecretKey，它如果被窃取就会被坏人利用。

在控制台依次点击个人中心，密钥管理，即可查看到密钥对。

命令行

需要下载七牛云的命令行工具文件，附上下载官网链接qshell。

你可以将文件qshell-windows-x64-v2.4.2重命名后保存到路径C:\Windows\System32中，做为系统变量来使用。当然，你也可以是在本地CMD环境任意路径下打开该文件。例如我的AK

: 格式
: .\qshell-windows-x64-v2.4.2 account -- ak sk name
: 以AK为Vks3OW2ud-TSBBif9AOoXI7w_JL8rGrRKnOustxu，SK为Sk****************为例.\qshell-windows-x64-v2.4.2 account -- Vks3OW2ud-TSBBif9AOoXI7w_JL8rGrRKnOustxu Sk**************** junkuang

上传工具

需要下载picgo。打开后，如下图配置使用即可。

image-20201028150047309

image-20201028150259037

Gitee仓库图床

由于2002年三月底，Gitee突然加上了防盗链的功能，必须要有refer字段才能直接访问资源，所以这个方法几乎也被废弃了。

新建仓库

新建一个仓库，初始化readme.md文件，将仓库设置为开源。因为私有库只有自己能够访问，图片上传是没有公开链接的。博主就以仓库https://gitee.com/JunKuangKuang/keen-blog-images为例。

获得Token，在网站上依次点击，个人设置->私人令牌->创建令牌，获得令牌，比如我的内容为23bf**************。

PicGo-Core的命令行只有在需要上传图片时才会启用一个进程，完成后自动关闭。而客户端PicGo虽然有图形化的界面，但是上传一次就会后台挂着服务。

pico-core命令行

首先运行命令下载插件picgo，安装成功后，继续使用picgo安装插件gitee-uploader。

# 下载picgo
npm install picgo -g# 安装插件
picgo install gitee-uploader

注意：PicGo命令行的配置文件在指定路径中。

C:\Users\Administrator\.picgo\config.json

将配置文件修改成为如下内容，即可完成gitee的配置。

{"picBed": {"current": "gitee","uploader": "gitee","gitee": {"branch": "master","customPath": "year","customUrl": "","path": "img/$customPath","repo": "JunKuangKuang/keen-blog-images","token": "23bf************"}},"picgoPlugins": {"picgo-plugin-gitee-uploader": true,}
}

解释一下gitee中的字段含义。

branch：选择仓库分支，必须是已经创建好的分支，这就是要在新建仓库的时候创建readme文件的原因。
path：对应的仓库路径，比如今年的图片链接地址就是img/$customPath
customPath：搭配path属性，可以不指定，默认为空字符串。
- customPath选择年，则实际的path值为img/2022
- customPath选择年季，则实际的path值为img/2022/summer
- customPath选择年月，则实际的path值为img/202/01
customURL：仓库提交链接，可以不指定，默认为空字符串。
- 默认空，生成的链接为 https://gitee.com/:owner/:repo/raw/:path/:filename
- 填入后可以更新为自定义链接。但是你要确保你新生成的链接可以正常访问资源！
repo：一般是用户名/仓库名称，比如我的就是JunKuangKuang/keen-blog-images
token：私人令牌，内容为23bf**************

在提交到码云后，会显示提交消息，插件默认提交的是 Upload 图片名 by picGo - 时间。

picgo客户端

如果此时你是Win系统，那么可以参考下文如何安装，这里以Mac系统为例。

首先使用Homebrew安装客户端，如果网络访问过慢可以直接登陆Github后科学上网完成下载。

brew install picgo --cask

安装插件gitee-uploader，对应的github链接。

image-20220728180701779

Hexo插件方案（放弃）

Hexo-admin是一个在线编辑、管理博客的插件，可以快捷新建、发布博客，使用其他的图片插件辅助展示图片。具体的安装和配置过程可以参考后一篇文章，这里只是介绍了该插件于三年前在Windows操作系统中图片插入方案。

缺点有四个。

只要页面刷新一次，原本解析成功的图片，就会变成解析失效的裂图标志。
不同的博客，插图都要放在同一个文件夹里，命名和管理就会很麻烦了。例如，在我早期编辑文档的时候，会用不同的图片来做首图，命名时就变成了shoutu1.jpg、shoutu2.jpg等等。管理命名防止重复和冲突很耗费心力
只对网络上的图片生效，本地图片必须手动复制和命名。
必须开启Hexo服务才可以使用。

使用hexo-admin

首先打开了hexo-admin的settings，图片选项两个都打勾，其他默认。

Hexo-Admin只有网上照片会直接复制图片到source/images目录并重命名。

图片从剪贴板复制到hexo-admin的编辑页面进行黏贴，格式如下，但是会无法解析。需要手动把括号中的前后两个斜杠去掉，就能正常显示。

# 无法解析
![upload fail](\\images\image-0.png\)# 解析成功
![upload successful](images\image-0.png)

本地图片不会复制且名称不会改变。需要手动把图片1.jpg放入source/images目录下，再引入链接方可解析成功。

![upload successful](\images\1.jpg)

扩展插件hexo-admin-ehc

在网上找到一个hexo-admin的插件hexo-admin-ehc，看示例介绍有图片选择器功能，但是不知道为什么，我安装后还是没看到。

没有选择器图

所以我用命令卸载了该插件，再删除文件/source/hexo-admin-ehc-images.json。

npm uninstall hexo-admin-ehc

开启opcache

参考文章hexo admin图片不显示怎么办，说是我浏览器配置的原因。

但是哪怕我翻了所有的设置选项也没在那里找到如何配置呀。

更新和感谢

更新记录

2022.7.27更新整体结构

2020.10.28更新使用图床

2020.7.17更新使用Typora

2020.4.24更新，该方案已弃用

2020.1.4更新，该方案已弃用

感谢

感谢过去努力的自己，感谢现在的好奇，为了能成为更好的自己。

致敬hexo的中文官方文档
typora + hexo博客中插入图片
周冰烽的博客
搭建 Chevereto 图床 & Typora 上传指南
Typora+PicGo Core+Chevereto实现笔记中的图片自动上传个人服务器图床
七牛云图床和Markdown使用
图床工具的使用---PicGo
typora + hexo博客中插入图片
hexo使用资源文件夹
PicGo + Gitee实现markdown图床

Hexo历险记之七展示图片相关推荐

Hexo历险记之六字符标签
前言之前我们已经成功创建了自己的博客,而且用主题和插件进行了美化,那么接下来我们就是要了解如何优雅地编写博客了. 这一篇,我会记录自己常用的字符和标签,以供大家参考和使用.(害羞) 提醒一下,对于图 ...
Hexo历险记之五幻丽插件
前言言接上文,在美化了主题之后,接下来要做的就是添加一些插件,来让你的博客更加完善和好看. 时隔四年,重启Hexo历险计划! Hexo历险记之五幻丽插件插件永久链接看一下对比,使用该插件之前和 ...
hexo+markdown添加本地图片无法显示
这个的话就要说一下hexo所支持的markdown和其他一些markdown语法稍微有点不同造成的. 比如我在写一篇文章时它的名字叫" R语言绘制个性化词云 ",这个时候它会自动 ...
使用Axure制作无限循环展示图片效果
一.实现的效果如图: 1.此次需要实现的效果是,进入界面后,在图片展示区域的图片根据事先设定好的时间,自动切换不同的图片: 2.循环不间断: 3.页面不出现闪烁的现象. 二.做前工作图片:4张软 ...
Python之tkinter：动态演示调用python库的tkinter带你进入GUI世界(Button展示图片事件)
Python之tkinter:动态演示调用python库的tkinter带你进入GUI世界(Button展示图片事件) 导读动态演示调用python库的tkinter带你进入GUI世界(Button ...
Cognos报表展示图片小技巧
Cognos报表展示图片小技巧场景:在销售行业,比如手机,服装行业,如果仅仅的显示数字.文字那就显得不是很生动了,例如可以显示一下图片,那种样子的产品受大家喜欢. 样例1:在报表头都喜欢加上一些公司 ...
变动翻屏展示图片效果
<HTML><HEAD><TITLE>变动展示图片效果</TITLE> <META http-equiv=Content-Type content ...
每日一学：如何用matplotlib展示图片
点击上方"算法猿的成长",关注公众号,选择加"星标"或"置顶" 总第 130 篇文章,本文大约 1000 字,阅读大约需要 5 分钟前言 ...
WordPress主题Ashade2.0摄影展示图片展示主题
WordPress主题Ashade2.0摄影展示图片展示主题下载地址: http://www.bytepan.com/2rIJxYlM3zl