Markdown插入图片的方法

本文介绍了Markdown插入图片的语法,包括插入本地图片和网络图片的方法。对于分享Markdown文件时可能出现的图片失效问题,提出了两种解决方案:一是引用网络上的图片地址,二是将图片转换为Base64字符串内嵌到文档中。
部署运行你感兴趣的模型镜像

Markdown插入图片的方法

Markdown插入图片的语法:

\!\[alt 属性文本](图片地址)
\!\[alt 属性文本](图片地址 "可选标题")

说明:

  • 以感叹号开头!
  • 接着一个中括号[ ]
  • 接着一个小括号( ),里面放上图片的网址,最后加上可选的’title’ 属性的文字。

1. 插入本地图片

使用实例:
\!\[markdown picture](./assets/favicon.png)
显示结果如下:

markdown picture

注意:中括号[ ]与小括号( )之间不能有空格。

如何解决在分享Markdown文件时图片失效的问题?

在插入本地图片的情况下,如果要分享Markdown文件,会遇到图片失效的问题。要避免这种情况的话,有2个办法:
1)可选择将图片上传到网络上,从而可以在 Markdown 文件中引用网络地址。
2)将图片内嵌到Markdown 文件中。图片内嵌到Markdown 文档中的方法如下:

首先,使用Base64工具将图片转为Base64字符串。
然后,将该字符串填写到图片地址的位置。

使用实例:
![markdown picture][markdownbase64]
[markdownbase64]:https://i-blog.csdnimg.cn/direct/3225536980087261150.png

显示结果如下:

markdown picture

2. 插入网络图片

使用实例:
![baidu logo](https://img-blog.csdnimg.cn/img_convert/0aaf388e02c6bd9beaec2cefff89c858.png)
显示结果如下:

baidu logo

The End

您可能感兴趣的与本文相关的镜像

LobeChat

LobeChat

AI应用

LobeChat 是一个开源、高性能的聊天机器人框架。支持语音合成、多模态和可扩展插件系统。支持一键式免费部署私人ChatGPT/LLM 网络应用程序。

在GitHub Markdown插入图片有多种方法: - **通过图片地址插入**:使用图片地址方式在Markdown插入图片较为合适。有很多小网页工具可上传图片并提供链接,如https://sm.ms/ ,不过此类工具可能不如GitHub稳定[^1]。 - **使用云端项目路径**:可将图片放在项目下,一起push到GitHub ,然后在Markdown文件中添加图片在云端项目中的路径,格式为:`https://raw.githubusercontent.com/用户名/项目名/master/图片文件夹/xxx.png` 。例如:`![img](https://github.com/Snowstorm0/learn-spring-boot/blob/master/%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png)` [^2]。 - **使用相对路径**:格式为`![Image text](folder/img.jpg)` 。例如:`![Image text](../0/pics/1093303-20170626104335696-1159292286.png)` ,其中`…`表示上一路径[^2]。 - **复制图片网址**:Push到GitHub后,在Google浏览器打开GitHub,右键点击图片,选择在“新标签页中打开图片”,复制图片的网址到Markdown中即可显示图片。若图片看不清楚,同样可右键“在新标签页中打开图片”复制新网址 [^3]。 - **获取在线url**:新建一个私人仓库,第一次进入仓库选择`uploading an existing file`上传第一个文件,之后进入选择`Upload files`,选择好图片后点击下方`Commit changes`,然后点开仓库中的图片,再点击`Download`,此时浏览器上方的链接即为图片的在线url,可以直接复制使用 [^5]。 ### 代码示例 ```markdown # 插入图片示例 ![使用云端路径](https://raw.githubusercontent.com/用户名/项目名/master/图片文件夹/xxx.png) ![使用相对路径](../0/pics/1093303-20170626104335696-1159292286.png) ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值