Typora等markdown笔记软件图片链接失效的问题解决办法

Typora等markdown笔记软件图片链接失效的问题解决办法，图片的相对路径、绝对路径的设置，图片上传到图床的方法

遇到的问题：Typora编辑MD文档，图片失效的问题解决

Markdown是一款非常方便的文档编辑器，可以用于文档总结，博客编辑等等。

我使用了Typora来进行MD的编辑。但是最近编辑文档是发现，插入的图片会经常失效。最终确定原因是：由于上传的图片使用的是绝对路径或者相对路径，每次插入截图的图片时，默认都是将图片存在C盘中，当MD文件移动时，图片的链接就会失效，就会出现图片加载失败的问题。

总述：

使用markdown写东西插入图片时分几种情况：

一、通过本地文件的绝对路径获取图片

缺点：一旦移动了原来的图片位置或者md文档，那么就会导致无法获取到图片，导致图片加载不出来。除非再次在电脑中找到该图片，然后重新上传一次。非常非常非常痛苦和麻烦。

二、将图片复制到.md同一文件下再通过文件相对路径获取

缺点：拷贝到同一目录下会增加文件体积，并且上传到网络上（如博客）的话，图片还是不会识别到你在本地的图片，还是要重新一个一个在上传一次图片。

三、将图片上传到图床后，通过图片链接获取图片。

缺点：windows端不能使用，只能mac上才有；mac端暂时没有缺点；

解决的方法：

方法一：本地图片，使用相对路径，并将图片放在和md文件的同一目录下

修改Typora图片引用的路径为相对路径，就会在MD的文件目录下生成一个图片的文件夹。移动文件时，把MD文件和这个存放图片的文件夹一起移动就可以解决图片丢失的问题。

步骤1、Typora的图片根目录设置

点击 文件—偏好设置—图像

默认是“无特殊操作”,更改为“复制图片到./${filename}.assets文件夹”

步骤2、Typora设置图片的相对路径

并勾选下面两项“对本地位置的图片应用上述规则”和“优先使用相对路径”

image

选择此选项后会，每次在新建一个md文件时，在md文档所在文件夹中就会自动创建一个与该文件同名的.assets的文件夹，复制的图片也会自动保存到其中

image

步骤3、Typora自动复制图片到指定目录下

勾选当插入本地图片时复制图片到文件夹：格式-图像-当插入本地图片时-复制图片到文件夹

image

​ 设置之后，每次粘贴到md文档中的图片的地址就变成了下图显示路径：

image

方法二：typora markdown图片自动上传到图床（iPic for MAC）

将图片上传到图床，是我最喜欢的方式，但是步骤也不少：打开图床、上传、复制链接、插入链接。总之像md文件中插入图片一直让我很头疼。

直到最近才发现typora提供了很优雅很爽的方式：本地插入图片时，直接将图片上传到图床iPic。简直爽到翻。而且，如果你想迁移图床, 可以使用 iPic mover 工具来实现, 这两个工具都可以在 app store 里下载。

缺点：windows端不能使用，只能mac上才有；mac端暂时没有缺点；

开启步骤：

步骤1、Preference -> Editor -> Allow upload to given server 勾选

image

步骤2、打开App Store，安装图床应用 iPic

image

步骤3、开启插入图片时上传到图床

image

步骤-附加：如果已经是写好的md文件，且图片都储存在本地，可以一键设置把文档里面的本地图片都上传到图床

单张图片上传的操作方法：

选中单张图片--右键--通过ipic上传图片

image

一次性上传全部图片的操作方法：

Ctrl+A 全选文章—>然后使用下图格式-图像-使用iPic上传本地图片

image image image

完成。

方法三：在Typora等支持markdown工具中永久插入图片：Markdown中嵌入base64图片

解决方法
首先将图片通过在线转码工具转换成base64的编码，并用以下格式嵌入即可

步骤如下：

步骤1、将图片或截图保存在本地；
步骤2、使用在线工具将图片转码至base64编码；（链接）
步骤3、 在文档中插入编码；
[图片上传失败...(image-820762-1576846319434)]

格式如下：

![image] (base64)
但是由于这base64编码往往都很长，很占篇幅，因此我们可以给图片编号，并将所有的图片base64编码放在文档的最后即可，格式如下：
在插入图片的地方使用：![image] [图片编号]
在文档最后使用：[图片编号]:base64编码
这样即可完成图片的永久插入！

注意不能用png格式，如果用了会非常影响你的编码体验，jpg的话，极少情况会出现问题。具体为啥，用typora试试就知道了。

这时又有一个问题，就是图片转换为base64之后，这段代码特别长，会影响到我们书写笔记，所以我们采用为图片代码设置image id，将这段代码放在最后即可！

格式如下：

image

这样就可以实现将图片内嵌入markdown中了

插入本地图片的base64编码，就可以做到图文合一了，只是不要弄太大的图片

---