关于Markdown图片无法显示的问题解决方法，Typora编写完Markdown文档后，本地图片显示正常，上载到github上或者GItee 图片无法显示的问题

淩亂°似流年 2023-06-21 11:22 8阅读 0赞

如题，博主和大部分程序员一样，喜欢编写Markdown文档(下文简称MD)。

近日有一个比较懒的需求，想在手机上看MD文档，但是又不想下载app。

又想躺在床上用手机看以前写的MD文档，索性想到了Github page 和Gitee page.

于是爽快的把文档上传了。(如何在Github||Gitee上使用page功能请移步百度，该文档不详细介绍)

### 打开以后，发现文字显示全都正常，**图片无法加载**。 ###

如下图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoMTMwOTY_size_16_color_FFFFFF_t_70][]

于是检查路径是否错误。

发现和根目录的图片文件夹没有问题。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoMTMwOTY_size_16_color_FFFFFF_t_70 1][]

按照计算机的路径名应该如下

### ./图片文件夹/图片名.jpg ###

且，在本地加载没有异常，只是上传到服务器就加载异常。

## MD文档的图片链接语法格式如下： ##

> ### !\[这里填写不能显示时的图片名字\](这里填写路径名) ###
> 
> ### !\[test\](./img/test.jpg) ###
> 
> 本地可以省略./
> 
> ## !\[test\](img/test.jpg) ##
> 
> 当然也可以使用反斜杠
> 
> ## !\[test\](img\\test.jpg) ##
> 
> 也可以使用网络地址
> 
> ## !\[test\](https://www.xxx.comg/img/test.jpg) ##

# 问题解决： #

## github和gitee不支持采用根目录的方式来链接服务器里的图片(具体以后求证) ##

所以，只能采用网络地址的形式来连接你GIthub Page里的项目路径名。

将

## !\[test\](./img/test.jpg) ##

转成

## !\[test\](https://用户名.github.io/项目名/raw/图片文件夹/test.jpg) ##

很显然，这样做很烦。而且，因为特殊的管理，直接采用/项目名/图片文件夹/图片的方式也访问不到，必须加一个**raw**来解决问题，就显得很繁琐

就有了第二种解决方式：

不采用Markdown 的图片引入语法

# **采用HTML的图片引入标签。（MD支持html）** #

> # **<img src="图片路径"/>** #

这样就可以不用写一大串的网络地址了。直接访问项目的图片文件夹。

## 当然，你也可以用变量的方式，给网络地址存进变量，然后 ##

> ## **!\[test\](变量名/test.jpg)** ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoMTMwOTY_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212155114787.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoMTMwOTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoMTMwOTY_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019121215420463.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hoMTMwOTY=,size_16,color_FFFFFF,t_70