VSCode编辑Markdown插入GitHub仓库图片无法显示如何解决

你插入图片时用的是GitHub仓库的blob预览页链接，这个地址指向的是带GitHub页面框架的HTML网页，不是纯图片资源的直链，Markdown渲染器无法从这个地址获取到图片文件，所以会出现加载失败的情况。

• 方案1：替换为GitHub raw直链
  把原链接里的域名github.com替换为raw.githubusercontent.com，同时删除路径中的/blob字段即可。修改后的图片插入代码如下：

  ![comparison](https://raw.githubusercontent.com/lyb1234567/CS_Self_Study/master/Data%20Structre%20and%20Algorithm/Complexity/image/Comparison.png)
  

• 方案2：使用相对路径引用（最推荐，本地和GitHub双端兼容）
  因为图片和Markdown文件都存放在同一个GitHub仓库中，不需要写完整的绝对URL，直接根据图片相对于当前编辑的Markdown文件的位置写相对路径即可。比如如果你的Markdown文件存放在Complexity目录下，和image文件夹处于同级目录，直接写以下代码即可：

  ![comparison](./image/Comparison.png)
  

  这种写法不会受仓库域名调整、分支名修改的影响，在VSCode本地预览和GitHub线上渲染时都能正常加载。

• GitHub的文件路径是大小写敏感的，写完路径后要核对文件夹名、文件名的拼写、大小写和仓库内实际存储的文件完全一致，任意字符不匹配都会导致图片404加载失败。

内容的提问来源于stack exchange，提问作者Yanbo Liu