工具连接:https://tanatc.github.io/mdFileImagesProcess/md_change_img.html
附图文章说明链接:https://tanatc.github.io/mdFileImagesProcess/
平时使用 typora 写文档上传git或者其他平台,但是 md 文件中图片的引用是一个资源地址,在当前本地中打开文档没有任何问题,一旦将 md 文件上传到 git 或者复制到其他平台发布问题就暴露了,图片会无法显示。问题原因是 md 文件中对图片的引用是将图片在本地的地址引用,如下图所示。将文档上传 git 或者其他平台后这个资源地址就找不到了。
解决方案有三个:
方案1:在当前文档所在的地址创建一个图片文件夹,然后将所有图片放入该文件夹中,上传git时把图片文件夹一并上传。但此方案存在如果是写博客文章之类的就无法上传图片文件夹。
方案2:将图片上传至某个服务器或者网盘,然后图片资源地址是 http:….. ,一个链接的形式,我尝试把图片上传到 QQ 空间,然后 md 文件中引用图片链接,本地可以显示,但是上传 git 后会被禁止查看。
方案3:将图片转为 base64 格式插入 md 文件中,这种方式对于本地或者上传git乃至其它平台都是一劳永逸,不用管理保存图片,担心某天图片丢失,文档将再也无法展示图片。但是有个缺点就是 base64 格式的图片字符串长度极长,因此也可以将图片放到文档最后,然后利用引用图片 id 方式引用图片。这个又有两种方式:
方式1、直接在图片资源处写base64字符串:![图片](data:image/jpg,base64,fafdsa...)
方式2、在文档末尾用链接引用:[id]:data:image/jpg,base64,fafdsa...
在图片处引用图片链接:![图片][id]
这里的图片转换工具采用了方案3的原理,将图片转为base64格式保存于文档中。
本人使用 windows 系统,因此在开发中对图片地址的处理均采用的 windows 地址转换,希望有使用其他系统的小伙伴可以对此工具进行修改,或者在使用过程中遇到什么问题有什么建议都可以提 issue 给我。
功能有两个,一是直接在原地将图片改为 base64 格式;二是将 base64 格式的图片链接引用在文档末尾,原图片处采用图片id格式,您可以根据个人喜好采用任意一种替换形式。
下载或克隆本仓库,浏览器打开其中的 md_change_img.html 文件。
打开后的界面如图所示,会有步骤指引。
第一步选择md文件,打开md文件并成功读取其中所有图片地址后会在文本框中展示当前的md文档内容,并且下面会显示一个当前文档中图片位置或者图片文件夹位置。
第二步则将图片文件夹地址复制到打开界面的地址栏中,全选图片文件夹中的图片,然后点击打开。
第三步点击任一种图片替换方式按钮,成功后会输出替换后的文档。
第四步将第三步中输出的文档全部复制回 typora ,在 typora 中图片正常显示则整个过程成功,没有显示图片则整个过程失败,可以将问题反馈到 issue 中。