目录
一、引用本地图片
(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下载
(3)PicGo
本人用的是Windows系统,在这里就用PicGo来介绍啦。
打开PicGo的界面:
注意:请确保你安装了Node.js,并且版本>=8。
提示:默认上传图床为SM.MS。PigGo上传之后,会自动将上传成功的URL复制到你的剪贴板,支持5种复制格式。
分享一篇文章,里面的内容极为详细;
(4)PicGo + Github图床
<1> 首先你要有一个Github账
<2> 将Github设置为默认图床
会出现提示的哦:
<3> 在Github上新建一个仓库
①New一个
②输入相关信息
③创建完成
<4> 返回PicGo进行Github设置
①仓库名填写“Github用户名/刚建立的仓库名”
②分支填写“main”或者master
③Token填写秘钥
找到“设置”:
找到“开发者设置”:
选择个人秘钥:
新建一个:
设置秘钥名称:
我们只勾选它的仓库权限:
在这里可以设置你想要的期限:
设置完成之后,我们点击新建:
复制这里的一串代码:
粘贴到PicGo的Github设置的Token里面:
④“指定存储路径”可以不填
⑤自定义域名
由于Github的服务器在美国,所以非常慢。
我们可以用cdn来加速。
UserName:你的用户名
RepoName:你的仓库名
我这里填写的是:
然后我们点击“确定”就设置成功啦!
<5> 图片上传及查看
①点击上传
②选择图片进行上传(选择的还是上面那个水晶图片哦)
我们可以在电脑屏幕左下角收到“上传成功”的消息通知:
③链接格式选择URL
④“相册”–>“查看图片 址”
可以看到 址信息:
⑤复制 址
⑥查看 址
打开一个浏览器,粘贴刚才我们复制的 址:
我们可以看到,图片被成功地传到该 址上了。
<6> 返回Github查看
找到我们刚才建立的仓库:
可以看到,“水晶”图片已经上传到这儿了:
(5)PicGo + Gitee图床
因为Github是国外的,上传可能会出现缓慢等问题,我们还可以用国内的Gitee,就会快很多。
在这里介绍一下。
具体怎么操作呢/p>
<1> 我们打开PicGo的“插件中心”
安装插件“gitee-uploader”
安装完成之后,我们退出重启PicGo,可以看到这儿会出现一个“gitee”:
<2>操作和Github里面很像
①新建一个仓库
②填写相关信息后创建
开源!!!初始化仓库!!!
可以看到界面:
③ 填写仓库和分支
④设置密钥
进入 Gitee 设置:
点击“私人令牌”:
生成新令牌:
复制链接:
粘贴进PicGo里面的“token”即可:
⑤后面的可填写可不填写
设置完点击“确定”即可。
<3> 404错误原因
这时候你上传图片可能会出现的错误:
这是因为Gitee设置的用户名错误,因此上传时404找不到该文件!
出现这个错误的原因是,PicGo里面的配置配错了,用户名以个人主页域名后的用户名为准!!!
<4>测试
我们将其设置成“默认图床”,再来试一试。
我们可以看到上传成功了,在Gitee创建的仓库里面也有相应的文件哦。
如果出现相关问题,可以参考一下这个博客:
(
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!