首页 > 技术文章 > markdown中显示图片的3种方式

strongmore 2021-03-11 19:56 原文

简介

  • Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
  • Markdown 语言在 2004 由约翰·格鲁伯(英语:John Gruber)创建。
  • Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
  • Markdown 编写的文档后缀为 .md, .markdown。

第一种

语法格式

![alt 属性文本](图片地址)

使用示例

![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png)

显示效果
RUNOOB 图标

第二种

语法格式

![alt 属性文本](data:image/png;base64,图片base64编码)

使用示例

![RUNOOB 图标]
(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQIAAAAnCAYAAAGTXnb3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Njc1MEQxNzM0NjNDMTFFNTg2NjlEMTYwMjY3RkJCQjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Njc1MEQxNzQ0NjNDMTFFNTg2NjlEMTYwMjY3RkJCQjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2NzUwRDE3MTQ2M0MxMUU1ODY2OUQxNjAyNjdGQkJCMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2NzUwRDE3MjQ2M0MxMUU1ODY2OUQxNjAyNjdGQkJCMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pu0m2UUAAA3ASURBVHja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)

显示效果
RUNOOB 图标

第三种

语法格式

<img src="url" />

使用示例

<img src="http://static.runoob.com/images/runoob-logo.png" />

显示效果

这一种方式相比前面两种显示效果可以更加的灵活,强大,如改变图片大小,添加样式等。

参考

Markdown 教程
Markdown 在线编辑器

推荐阅读