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

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

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

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

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

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

如下图:

 

于是检查路径是否错误。

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

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

./图片文件夹/图片名.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)

 

 

 

 

 

 

 

 

 

 

 

 

Markdown文档中的图片无法显示时,通常有几种可能的原因。一种可能是Markdown文档中的图片路径发生了变化。在上传到Gitee或其他服务器之后,图片的路径需要进行相应的修改才能正确显示。比如,如果使用的是绝对路径方式导入图片资源,那么需要确保图片路径正确并且与服务器上的文件路径匹配。 另外,有时候在本地加载图片没有问题,但上传到服务器后出现异常,这可能是因为服务器上的文件路径与Markdown文档中的路径不一致,导致图片无法正常加载。 如果图片路径没有问题,还有可能是图片文件本身出现了错误或损坏。请确保图片文件存在,并且文件格式正确。可以尝试打开图片文件确认是否能够正常显示。 如果以上方法都不能解决问题,还可以尝试使用其他方式引入图片,比如使用HTML的图片引入标签来显示图片。具体可以使用`<img src="图片路径"/>`的方式引入图片。这样可以绕过Markdown图片链接语法,直接使用HTML标签进行图片引入。 总结来说,当Markdown中的图片无法显示时,可以检查图片路径是否正确,图片文件是否存在和正确,尝试使用HTML的图片引入标签等方法解决问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [关于Markdown图片无法显示问题解决方法Typora编写Markdown文档后,本地图片显示正常上载github上...](https://blog.csdn.net/xh13096/article/details/103510129)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [Gitee上传Markdown文档图片无法读取问题解决](https://blog.csdn.net/qq_40491534/article/details/120461496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值