一、引用本地图片

（1）拷贝图片

（2）相对路径

（3）特殊情况

<1> 文件与图片都在当前文件夹

<2>图片在文件的上一个文件夹

（4）弊端

二、引用网络图片

（1）选择一张网络图片

（2）粘贴路径

（3）好处

三、使用图床插入图片

（1）引入

（2）APP推荐

（3）PicGo

（4）PicGo + Github图床

<1> 首先你要有一个Github账号

<2> 将Github设置为默认图床

<3> 在Github上新建一个仓库

<4> 返回PicGo进行Github设置

<5> 图片上传及查看

<6> 返回Github查看

（5）PicGo + Gitee图床

<1> 我们打开PicGo的“插件中心”

<2>操作和Github里面很像

<3> 404错误原因

<4>测试

（6）进阶

（7）提醒

（8）Typora+PicGo

<1> 打开Typora的偏好设置

<2> 修改Typora权限

<3> 上传图片

四、图片排版

给图片加图注

<1> 打开Typora

<2> 输入代码

<3> 上传图片到图床

<4> 上传图片至Typora

<5> 对图片进行比例缩放

<6> 图注

一、引用本地图片

（1）拷贝图片

如果你对Markdown不熟悉的话，可以直接拷贝一张图像，然后直接粘贴在Typora里面。

比如

我们可以看到，这里是把文件的绝对路径给引用过来了：

（2）相对路径

在Typora里面使用插入图片的快捷键“ Ctrl+Shift+I ”。

然后点击选择路径。

找到想插入的图片目录。

比如我这里的：

还可进行缩放图片：

（3）特殊情况

<1> 文件与图片都在当前文件夹

若此时你写的Typora文件和你所需要插入的图片在同一个目录下。

就可以直接使用“ ./ ”的快捷方式来找到当前文件所在的目录。

比如，此时我们创建一个文件夹，将Typora文件和要插入的图片放入。

打开Typora文件，我们需要将“水晶”这张图片引入。

方法：

先按快捷键“ Ctrl+Shift+I ”，然后在路径位置写上“ ./ ”，然后将图片名称（包括后缀名）写在里边。

注： “ ./ ”代表“图片.md”所在的文件夹。

可以看到结果插入成功：

<2>图片在文件的上一个文件夹

若此时你所需要插入的图片在你写的Typora文件上一个目录中。

就可以直接使用“ ../ ”的快捷方式来找到当前文件的上一级目录。

比如，现在这个图片在我们Typora文件的上一级目录。

这是图片所在路径：

这是文件所在路径：

方法：

那我们打开这个文件，先按快捷键“ Ctrl+Shift+I ”，然后写入“ ../ ”，然后写入图片名称（包括后缀名）。

注： “../ ”代表“图片.md”所在的上一级文件夹。

可以看到结果插入成功：

（4）弊端

无论是绝对路径还是相对路径，实际上都是引用图片的路径。

引用的都是路径本身，而不是图片。

我们可以看到，Typora写的文件比图片本身的内存占用还要低（所以Markdown非常节省存储空间）。

文件并不包含图片本身。

如果我们把本地图片删掉或者该张图片的名称路径改动了，在文件中就无法显示图片了。

二、引用网络图片

（1）选择一张网络图片

选择一张网络图片，复制它的链接：

（2）粘贴路径

然后再Typora里面按快捷键“ Ctrl+shift+I ”，然后在小括号里面粘贴刚才拷贝的路径。

（3）好处

网络图片在这里基本不会失效。

但如果这个图片所在的网址被停止访问了，这张图片自然也不能正常被访问了。

三、使用图床插入图片

（1）引入

那如果我们把图片上传到一个网站上，比如说上传到自己的微博里面，那么这张图片基本不会被删除，除非你违规了哈哈。那么这张图片就基本上稳定地在Typora里面进行显示了。

这就是我们接下来要讲到的图床（Image Hosting Service）基本思想。

（2）APP推荐

图床不需要你自己上传到微博或者其他平台。它会通过一个APP或者某个服务器，自动帮你进行上传。这样用起来就会非常方便。

这里推荐两款APP。

iPic下载：可在 Mac App Store下载

PicGo下载：PicGo (molunerfinn.com)https://molunerfinn.com/PicGo/ PicGo相关介绍及下载：

Molunerfinn/PicGo: A simple & beautiful tool for pictures uploading built by vue-cli-electron-builder (github.com)https://github.com/Molunerfinn/PicGo

（3）PicGo

本人用的是Windows系统，在这里就用PicGo来介绍啦。
打开PicGo的界面：

注意：请确保你安装了Node.js，并且版本>=8。

提示：默认上传图床为SM.MS。PigGo上传之后，会自动将上传成功的URL复制到你的剪贴板，支持5种复制格式。

分享一篇文章，里面的内容极为详细;

快速上手 | PicGohttps://picgo.github.io/PicGo-Doc/zh/guide/getting-started.html#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B

（4）PicGo + Github图床

<1> 首先你要有一个Github账号

<2> 将Github设置为默认图床

会出现提示的哦:

<3> 在Github上新建一个仓库

①New一个

②输入相关信息

③创建完成

<4> 返回PicGo进行Github设置

①仓库名填写“Github用户名/刚建立的仓库名”

②分支填写“main”或者master

③Token填写秘钥

找到“设置”：

找到“开发者设置”：

选择个人秘钥：

新建一个：

设置秘钥名称：

我们只勾选它的仓库权限：

在这里可以设置你想要的期限：

设置完成之后，我们点击新建：

复制这里的一串代码：

粘贴到PicGo的Github设置的Token里面：

④“指定存储路径”可以不填

⑤自定义域名

由于Github的服务器在美国，所以非常慢。

我们可以用cdn来加速。

https://cdn.jsdelivr.net/gh/UserName/RepoName

UserName：你的用户名

RepoName：你的仓库名

我这里填写的是：

然后我们点击“确定”就设置成功啦！

<5> 图片上传及查看

①点击上传

②选择图片进行上传（选择的还是上面那个水晶图片哦）

我们可以在电脑屏幕左下角收到“上传成功”的消息通知：

③链接格式选择URL

④“相册”-->“查看图片网址”

可以看到网址信息：

⑤复制网址

⑥查看网址

打开一个浏览器，粘贴刚才我们复制的网址：

我们可以看到，图片被成功地传到该网址上了。

<6> 返回Github查看

找到我们刚才建立的仓库：

可以看到，“水晶”图片已经上传到这儿了：

（5）PicGo + Gitee图床

因为Github是国外的，上传可能会出现缓慢等问题，我们还可以用国内的Gitee，就会快很多。

在这里介绍一下。

具体怎么操作呢？

<1> 我们打开PicGo的“插件中心”

安装插件“gitee-uploader”

安装完成之后，我们退出重启PicGo，可以看到这儿会出现一个“gitee”：

<2>操作和Github里面很像

①新建一个仓库

②填写相关信息后创建

开源！！！初始化仓库！！！

可以看到界面：

③ 填写仓库和分支

④设置密钥

进入 Gitee 设置：

点击“私人令牌”：

生成新令牌：

只勾选一个“projects”就可以了：

复制链接：

粘贴进PicGo里面的“token”即可：

⑤后面的可填写可不填写

设置完点击“确定”即可。

<3> 404错误原因

这时候你上传图片可能会出现的错误：

这是因为Gitee设置的用户名错误，因此上传时404找不到该文件！

出现这个错误的原因是，PicGo里面的配置配错了，用户名以个人主页域名后的用户名为准！！！

<4>测试

我们将其设置成“默认图床”，再来试一试。

我们可以看到上传成功了，在Gitee创建的仓库里面也有相应的文件哦。

如果出现相关问题，可以参考一下这个博客：

10.picgo+gitee创建图床及常见报错_a2274001782的博客-CSDN博客https://blog.csdn.net/a2274001782/article/details/121230526?share_token=c3a800d7-2fb7-49e7-9aeb-968aad07fe0d

（6）进阶

推荐一个截图后直接上传的插件：

可以自定义快速截图并上传的快捷键：

这些设置我也喜欢把打开：

（7）提醒

因为插件是基于npm的，所以要先安装nodejs，可直接去官网下载，提供一个下载链接：

node-v14.11.0-x64.zip - 蓝奏云 (lanzoui.com)https://oier.lanzoui.com/ie1Q6h9z5ab

（8）Typora+PicGo

<1> 打开Typora的偏好设置

更改如下设置：

验证图片上传选项：

可以看到是成功的。

它会自动在PicGo上传俩个不知道啥，删掉就是了。

<2> 修改Typora权限

修改Typora的权限，打开时用管理员的身份打开，这样在上传图片的时候，就可以创建upload文件夹。

找到Typora的安装目录，打开属性。

打开“兼容性”--->“以管理员身份运行此程序”。

<3> 上传图片

随便截了一张图，然后粘贴到Typora里面，点击“上传图片”。

等待上传。

上传成功：

四、图片排版

这里需要一点点HTML的知识。

给图片加图注

<1> 打开Typora

输入“<center>”，然后回车。

<2> 输入代码

<3> 上传图片到图床

任意截图然后按刚才我们设置的快捷键“Ctrl+Shift+0”快速上传至图床。

或者任意复制图片按快捷键“Ctrl+Shift+P”上传至图床。

<4> 上传图片至Typora

我们可以设置一下“上传后自动复制链接 ”：

这样我们在上传图片至图床之后，就会拥有这张图片的链接了。

然后我们就可以直接在Typora里面粘贴即可。

就会出现图片啦！

<5> 对图片进行比例缩放

再次输入代码

展示效果，图片缩为原来的25%了。

<6> 图注

我们可以看到，这样写的话是并排的。

语法：

<br>

（blank row ，空白行）

如果我们加一个空白行，汉字就会到图片下边去了。

就像这样：

看一下效果：

Markdown书写软件Typora的使用--图片上传（PicGo与Github/Gitee）及排版相关推荐

Markdown书写软件Typora的使用--入门（基本操作）
目录一.介绍 (1)基本 (2)设置二.标题三.段落四.字体五.列表六.表格(Ctrl+T) 七.引用 (区块显示) 八.分割线九.脚注十.代码十一.链接十二.图片插入十三.其他 ...
Typora如何把图片上传到图床smms.app
Typora 下载地址:百度云官方下载 PicGo 下载地址:百度云官方下载免费图床 smms.app 访问地址:https://smms.app/ 用Typora平时做笔记挺好用,但是插入 ...
Markdown书写软件Typora的使用 -- 渲染（让你的Typora更上档次）
在这里说一些注意事项以及一些Typora的不完全使用技巧.在这里感谢网上各位博主的问章,让我这个小白也学习了很多.在这里稍微总结一下常见的使用技巧,如果你也想让Typora更加绚烂,欢迎一起学习! 目 ...
解决picgo图片上传失败
前言昨天才刚搭建好的 typora+picGo+gitee的token 兴高采烈的写笔记,今天在typora中就图片上传失败了. 我的的解决办法就是更换picGo的图床,从gitee 更换为SM.M ...
GIt上传到远程库Gitee出现的问题，需要身份表明和私人邮箱的问题
连接远程仓库出现的问题问题一:git commit -m "第一次上传",显示要证明自己的身份尝试1: git config --global user.email " ...
Typora等markdown笔记软件图片链接失效的问题解决办法，图片的相对路径、绝对路径的设置，图片上传到图床的方法
文章目录 -遇到的问题:Typora编辑MD文档,图片失效的问题解决 -解决的方法: 方法一:本地图片,使用相对路径,并将图片放在和md文件的同一目录下步骤1.Typora的图片根目录设置步骤2. ...
Gitee+typora+picgo+插件，markdown图床配置，一键将markdown中本地图片上传至图床
一键将markdown中本地图片上传至图床推荐配置:Gitee+typora+picgo+插件文章目录安装 picgo 配置 typora 配置 Gitee 图床配置图床设置配置 typor ...
博客图片上传：Typora+PicGo图床
博客图片上传:Typora+PicGo图床设置原因,解决问题:在Typora的笔记上传博客的时候,或者 typora到其它电脑上时,由于图片是本地图片,导致无法上传或者看不到无法加载该图片. ...
自动将*.md文档中的图片上传到Gitee（Typora+PicGo+Gitee）
1. 存在问题很多刚接触markdown文档格式的友友们,在使用文档中的图片时还存在一些问题:直接将截图下来的图片或是本机图片粘贴在文档中,图片的地址还是本地文件的地址(如D:\xxx),这种情况下 ...
Typora图片上传到CSDN
原文链接:Typora笔记上传到CSDN解决图片问题_AI浩的博客-CSDN博客_typora上传到csdn 感谢大佬的文章,亲测有效!!! 下文为我的操作记录. 简单分为四步: 安装Node.js ...

Markdown书写软件Typora的使用--图片上传（PicGo与Github/Gitee）及排版

一、引用本地图片

（1）拷贝图片

（2）相对路径

（3）特殊情况

<1> 文件与图片都在当前文件夹

<2>图片在文件的上一个文件夹

（4）弊端

二、引用网络图片

（1）选择一张网络图片

（2）粘贴路径

（3）好处

三、使用图床插入图片

（1）引入

（2）APP推荐

（3）PicGo

（4）PicGo + Github图床

<1> 首先你要有一个Github账号

<2> 将Github设置为默认图床

<3> 在Github上新建一个仓库

<4> 返回PicGo进行Github设置

<5> 图片上传及查看

<6> 返回Github查看

（5）PicGo + Gitee图床

<1> 我们打开PicGo的“插件中心”

<2>操作和Github里面很像

<3> 404错误原因

<4>测试

（6）进阶

（7）提醒

（8）Typora+PicGo

<1> 打开Typora的偏好设置

<2> 修改Typora权限

<3> 上传图片

四、图片排版

给图片加图注

<1> 打开Typora

<2> 输入代码

<3> 上传图片到图床

<4> 上传图片至Typora

<5> 对图片进行比例缩放

<6> 图注

Markdown书写软件Typora的使用--图片上传（PicGo与Github/Gitee）及排版相关推荐

最新文章

热门文章