1.新建仓库
2.输入仓库名称，也就是图床名称，必须设置开源可见
也可以在创建仓库后，点击管理->基本信息->是否开源进行设置
鼠标悬浮到右上角头像->设置
点击私人令牌
点击生成新令牌,填写描述,直接点提交即可
点击提交后输入登录密码会生成一个token秘钥,如下,这个一定要保存好,因为不会二次出现
下载PicGo桌面软件: https://github.com/Molunerfinn/picgo/releases
选择适合自己的版本进行下载
安装完成后如下:
点击插件设置因为这个软件没有默认的gitee,需要手动下载gitee插件
切记一定要是最新版nodejs,否则会下载失败或者等待时间较长
安装下载gitee-uploader这一个插件即可
安装完成后点击图床设置就有了gitee
点击编辑按钮
在弹出框内弹出内容依次如下所示
- 图床配置名:图床配置别名(随便填)
- repo: 图床路径,例如仓库地址为
https://gitee.com/xiaojisengren/img则repo就是xiaojisengren/img - branch:分支名(
master) - token:输入刚刚我们复制的token令牌即可
- path:存放图片的文件夹,例如填写
web,则会在当前图床img仓库内创建一个web文件夹,里面存放上传的图片(如果存在web文件夹则会直接在里面添加图片) - 剩下的直接默认就可以了,直接点击确定即可
切记:如果设置多个图床设置的话,需要在这个页面选中要上传到哪个配置里面,这里可以选择我们上传的路径配置
接下来就该上传图片了
点击左侧上传区
直接拖拽文件上传即可
右下角会提示上传成功
去gitee仓库上面查看
这里就成功上传了一张图片了
点击相册可以查看图床的图片
下面三个图标的解释
- 复制图片URL链接
- 修改查看编辑图片URL链接
- 删除图片
这里注意一点:当图片剩下最后一张时,点击删除会同步删除当前图片所在的文件夹
使用Typora查看图片在线链接是否可用
复制完上面链接后,直接ctrl+v查看图片是否显示
可以看到,上面默认的是点击复制是makedown格式的,接下来修改一下复制的连接格式
点击相册最上面的标题,展开右边这个输入框,选择复制的格式即可,这里我选择URL地址,后面点击复制就是URL地址了
作为一名前端人员,也经常使用在线图片,,复制链接,使用html打开这个图片查看一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://gitee.com/xiaojisengren/tuchuang/raw/master/web/9.png" alt="图片未显示">
</body>
</html>可以发现图片并没有显示
解决方案
在head头添加<meta name="referrer" content="no-referrer">即可解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://gitee.com/xiaojisengren/tuchuang/raw/master/web/9.png" alt="图片未显示">
</body>
</html>查看效果
非常完美