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编码,就可以做到图文合一了,只是不要弄太大的图片


©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容