如何在markdown文件中添加图片

3,557 阅读1分钟

今天要编写项目的readme.md文件,用于对系统的简单介绍,之前我也只是在写博客等地方用到md语法,并没有单独编辑过一个md文件,今天讲讲如何打开一个md文件以及在md文件中添加图片。

首先,打开一个md文件的方式很多,如记事本、sublime等,我在这里使用的是vscode,用vscode打开md文件后,可以按快捷键Ctrl+k,松手,然后按下v(需要在英文状态下),这样就可以打开md文件的实时预览,在编写的时候就可以看到md文件展示效果,其他语法今天就不在论述了,今天讲讲如何在readme.md文件中添加图片。

  1. 首先将图片上传到github等远程仓库
  2. 在md文件中输入![***](***)[]中为图片显示出出来时,会显示的文字,()为图片的远程地址

做完以上两步,我觉得应该没有什么问题了,但是这时候预览遇到了一个小问题,图片还是显示不出来,把地址单独复制到浏览器是可以正常查看图片的

在网上找了资料,发现只要改路径的一个文件名就可以显示图片了。发现原来github和md文件关联的图片地址是有一定的格式的,其格式如下:

https://github.com/用户名/repository仓库名/raw/分支名master/图片文件夹名称/***.png or***.jpg

按照此格式github会自动解析这个语法,并把图片在md文件中正常显示出来。

就是将地址中仓库后面的/blod/改为raw,图片正常显示,大功告成