网站如何插入图片
其实docusasurus的官网是有教学插入图片的,链接:资源 | Docusaurus
下面会讲述三种方法:
1,把图片放在本地
2,把图片放在微博图床
3,把图片放在阿里云图床
1,把图片放在本地
假如你是在my-doc.md文件中,你可以像我这样,在文件夹下面新建一个img文件夹
这样你就可以用下面这行代码表示你的图片
![](.\img\my-img_name.png)
但是,把图片放在工程本地,导致打包大小变得很大,并且托管到GithubPages后图片加载的速度惨不忍睹。所以我们有必要建立图床,使用外链引入到Markdown笔记中,这样工程包的大小缩小了,访问速度也有所提升。
2,把图片放在微博图床
微博图床最好的优点是免费,但是缺点是不可控,哪天微博把 API 关了,图片就没了,但是如果你觉得这不重要,可以使用。你可以做好备份。
首先,需要安装微博图床插件,链接:微博图床 (google.com)
可能需要你登录微博,那么访问微博就好了。 使用非常的便捷,只要将需要的图片复制进入窗口即可。 你只需要上传一张图片,然后在窗口中粘贴即可。右边会生成各种代码,你可以直接粘贴到你的工程中。
<img src="https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/img/my-img_name.jpg"/>
在你的博客中,像下面这样插入图片:
![image.png](https://jetzihan-img.oss-cn-beijing.aliyuncs.com/blog/img/my-img_name.jpg)
3,把图片放在阿里云图床
可控,而且也不贵,一年 9元
首先,需要先进行阿里云oss注册,链接:阿里云产品_云计算_数据库_大数据_人工智能-阿里云 (aliyun.com)
在阿里云首页选择对象存储OSS服务。
然后开通oss控制台,需要实名认证,支付宝扫码即可。
点击创建一个新的bucket。
直接,在右侧找到Bucket管理,点击创建Bucket
名字,自己取一个,重要的是
1,地域选择一个离自己最近的。
2,储存类型选标准存储
3,读写权限为公共读
打开创建的bucket列表,如图,在外网访问的Endpoint下,只需要复制oss-cn-wuhan-lr即可,不需要后面的.aliyuncs.com。
来到页面的右上角,鼠标放在你的头像上,在弹出的框里选择AccessKey管理。
进入后,创建一个AccessKey
。
在弹出的界面里,记住你的accessKeyId和accessKeySecret.
PicGo配置
在Github中下载Releases · Molunerfinn/PicGo (github.com),并点击安装。在电脑桌面右下角的PicGo图标打开软件。在图床设置里面选择阿里云OSS,依照以下步骤填写信息:
- 设定
Keyld
:填写刚刚获得的AccessKeyID - 设定
KeySecret
:填写AccessKeyIDSecret - 设定储存空间名:填写
bucket
名称,这里填写的是bucket名称,不是浏览器里的域名。 - 确认存储区域:填写你的地域节点,注意复制的格式。
- 指定存储路径:其实就是自定义一个文件夹的名字,以/结尾,它会自动在你的bucket里面创建一个文件夹,并把图片上传进去。
图床配置名:自己随便填
accessKeyId和accessKeySecret就是刚刚保存的
Bucket是自己创建的名字,储存区域就是oss-cn-wuhan-lr(lr千万别忘了),这里是你的地域名称,添加一个储存路径img/,便于管理。
上传图片
找到上传后文件的地址。
https://xxxxxx.oss-cn-wuhan.aliyuncs.com/blog/1.png
之后在my-doc.md文件中写出就好。
本篇文章受 CC BY-NC-SA 4.0 协议保护,转载请注明出处。