跳到主要内容

网站如何插入图片

其实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,依照以下步骤填写信息:

  1. 设定Keyld:填写刚刚获得的AccessKeyID
  2. 设定KeySecret:填写AccessKeyIDSecret
  3. 设定储存空间名:填写bucket名称,这里填写的是bucket名称,不是浏览器里的域名。
  4. 确认存储区域:填写你的地域节点,注意复制的格式。
  5. 指定存储路径:其实就是自定义一个文件夹的名字,以/结尾,它会自动在你的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 协议保护,转载请注明出处。