MarkDown添加图片的三种方式

2023-05-16

摘自:https://www.jianshu.com/p/280c6a6f2594

MarkDown添加图片的三种方式

清风Python

102018.02.08 00:09:12字数 540阅读 477,205

插图最基础的格式就是:

  • ![Alt text](图片链接 "optional title")

Alt text:图片的Alt标签,用来描述图片的关键词,可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字,后来又被用于SEO,可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接:可以是图片的本地地址或者是网址。"optional title":鼠标悬置于图片上会出现的标题文字,可以不写。

插入本地图片

只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。
例如:

  • ![avatar](/home/picture/1.png)

不灵活不好分享,本地图片的路径更改或丢失都会造成markdown文件调不出图。

插入网络图片

只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选。
例如:

  • ![avatar](http://baidu.com/pic/doge.png)

将图片存在网络服务器上,非常依赖网络。

把图片存入markdown文件

用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置。

  • 基础用法:
    ![avatar](data:image/png;base64,iVBORw0......)
    这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾,然后在文章中通过一个id来调用,文章就不会被分割的这么乱了。
  • 高级用法
    比如:
  • ![avatar][base64str]
  • [base64str]:data:image/png;base64,iVBORw0......

最后,base64的图片编码如何得来?

  1. 使用python将图片转化为base64字符串
import base64
f=open('723.png','rb') #二进制方式打开图文件
ls_f=base64.b64encode(f.read()) #读取文件内容,转换为base64编码
f.close()
print(ls_f)
  1. base64字符串转化为图片
import base64
bs='iVBORw0KGgoAAAANSUhEUg....' # 太长了省略
imgdata=base64.b64decode(bs)
file=open('2.jpg','wb')
file.write(imgdata)
file.close()

©本文由简书作者:清风Python 原创 如需转载请注明

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

MarkDown添加图片的三种方式 的相关文章

  • Angular - 使用 \n 渲染 Markdown

    我正在尝试在 Angular 应用程序中渲染 Markdown 我正在使用ngx markdown https github com jfcere ngx markdown与 Angular 5 一起使用 效果很好 但是 我必须升级到 An
  • R 中的 Markdown 表到数据框

    有多种方法可以将数据框转换为 Markdown 表 但是 给定 Markdown 表 如何转换回数据帧 给定一个表格 Table Header Second Header Table Cell Cell 2 Cell 3 Cell 4 或者
  • 如何在 BitBucket mark down 中的列表项下嵌套代码块?

    虽然这个问题有几个带有关键字组合的问题 答案 但我没有看到直接提出相同问题或回答它的问题 答案 我想在列表项下嵌套一个代码块 当我遵循这个answer https meta stackexchange com a 3793 我不太明白我想要
  • 如何格式化 Multimarkdown 表格?

    我正在按照以下表格部分下的指南编写 Multimarkdown 表格语法指南 http fletcherpenney net multimarkdown users guide multimarkdown syntax guide 我希望使
  • 在 Markdown 中更改美人鱼主题

    除了代码之外 我在 Markdown 文档中使用 mermaid 进行基本图表渲染 我发现这个在线编辑器 https mermaidjs github io mermaid live editor 在预览时对其进行编辑很有用 这建议更改主题
  • 以富文本形式 Markdown 到剪贴板

    在 Windows 上使用 Python 我尝试获取一个 Markdown 文件并将其作为富文本粘贴到我的剪贴板中 大部分拼图都很简单 将 Markdown 解析为 HTML 没有问题 通过 TKinter 将内容放入剪贴板 是的 但这是我
  • 使用 Vim 命令打开标记中的当前文件

    我一直在尝试为 Brett Terpstra 的 Marked 应用程序创建一个命令 不幸的是我无法让它工作 上标记奖励包 http support markedapp com kb how to tips and tricks marke
  • gulp通过markdown json用jade生成html文件

    我在用着gulp markdown to json and gulp jade 我的目标是从 markdown 文件中获取数据 如下所示 template index jade title Europa This is a test gra
  • 比较和对比轻量级标记语言[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在 tkinter 中显示 markdown 格式文本?

    In python 3 x with tkinterGUI 我开发了一个带有常规简单窗口的程序 我想展示一个markdown格式字符串保存在名为的字符串中markdownText在程序窗口上 markdownText italic or b
  • 使用 Jade 的 :markdown 过滤器时是否可以包含外部文件?

    我正在构建一个 Express js Node 应用程序并使用 Jade 模板 玉石提供了一个 markdown允许在 Jade 中嵌入 Markdown 代码的过滤器 h1 This is Jade markdown And this i
  • 如何在在线编辑器中查看在线 Markdown 文档 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有一个在线 Markdown 文档 例如 www example com README md 我想要
  • 关于:链接(Markdown 页面)上的blank#blocked

    在 Markdown 页面中 Microsoft TFS Wiki 我尝试创建 A 标签file link a href file txt a 点击 Chrome 后 我得到了 about blank blocked 这不是 Chrome
  • 使用 KnitR 在 R 中以编程方式创建 Markdown 表

    我刚刚开始了解 KnitR 以及使用 Markdown 生成 R 文档和报告 这对于我与工作有关的许多日常报告来说似乎是完美的 然而 我没有看到的一件事是使用 Markdown 格式打印数据框和表格的简单方法 有点像xtable 但使用 M
  • 自定义 github 页面的预览图像

    是否可以自定义在将链接发布到 github 页面时看到的预览图像 我觉得他们专门解决了 github 存储库的问题here https docs github com en github administering a repository
  • Pandoc:如何在目录前添加表格?

    我想在 pandoc markdown 生成的目录之前添加一个表格 我找到了参数 include before 这样 我可以在目录之前添加文本 但是有没有办法添加表格呢 下面显示我的代码 我希望目录位于两个表和 header1 之间 而不是
  • 您可以将文本文件中的信息导入/引用到 Markdown 文件中吗?

    我找不到这方面的示例 但是是否可以通过引用将文本导入到 Markdown 文件中 例如 假设我有我的README md Markdown 可以导入吗somefile txt进入自述文件 就像图像参考一样 简单回答 不 Markdown 不支
  • 循环中的knitr模板和子文档

    圣诞节前我之前问过跨多个 knitr 文档的单一样式表 https stackoverflow com questions 20370584 single style sheet across multiple knitr document
  • yard 0.7.3 无法在 Markdown 和 Textile 中构建我的自述文件

    我决定将我的项目中的 README 文件转换为 Markdown 并一直使用yard 验证文档是否正确呈现 所以我安装了 rdiscount 将 README 更改为 README md 并尝试 yard doc README md 这给了
  • 标记(Markdown)+ Mermaid(流程图和图表)

    努力去争取 美人鱼 https github com knsv mermaid https github com knsv mermaid跟 共事 标记 https github com chjj marked https github c

随机推荐