MarkDown添加图片

朱雀 2022-10-13 12:52 171阅读 0赞

##### 一、基础语法 #####

![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的图片编码如何得来？

使用python将图片转化为base64字符串

import base64
    f=open('723.png','rb') #二进制方式打开图文件
    ls_f=base64.b64encode(f.read()) #读取文件内容，转换为base64编码
    f.close()
    print(ls_f)

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关 markdown统一设置图片格式_Markdown教程

Markdown是一种强大的文本书写语言，可以用经历少的步骤书写出非常工整的格式，无论是些用来写实验报告，写博客还是电子书都算得上是强力的工具，本文将粗略讲解Markdown的

- 日理万妓/ 2023年01月02日 07:29/ 0 赞/ 272 阅读

相关 Django 教程之添加markdown支持

为了让博客文章具有良好的排版，显示更加丰富的格式，我们使用 Markdown 语法来书写博文。Markdown 是一种 HTML 文本标记语言，只要遵循它约定的语法格式，Mar

布满荆棘的人生/ 2022年12月27日 09:09/ 0 赞/ 180 阅读

相关非会员如何添加youdao笔记的markdown添加图片

背景经常使用有道笔记，但是值得付费的东西还不多，目前只需要markdown上产图片功能，单独为这个付费不值得。现在贴下我是用的临时方法解决本地E盘建立文件

妖狐艹你老母/ 2022年12月16日 03:54/ 0 赞/ 118 阅读

相关 MarkDown添加图片

一、基础语法 ![Alt text](图片链接 "optional title") > Alt text：图片的Alt标签，用来描述图片的关键词，可以不写。最初

朱雀/ 2022年10月13日 12:52/ 0 赞/ 171 阅读

相关 Markdown编辑器让图片居中

在markdown里默认插入图片一般默认都是居左显示想要让图片居中就得使用下面的html代码来实现 <center> <img src="这里输入图片地址

短命女/ 2022年08月28日 00:37/ 0 赞/ 258 阅读

相关 Markdown 添加 Latex 数学公式

转载自https://www.cnblogs.com/peaceWang/p/Markdown-tian-jia-Latex-shu-xue-gong-shi.html

末蓝、/ 2022年05月27日 01:13/ 0 赞/ 368 阅读

相关 markdown 图片并排显示

要一张图片接着一张图片的写，中间不能有换行。如果换行的话则图片也换行正确的写法： ![描述](图片链接)![描述](图片链接)![描述](图片链接) 实例：

浅浅的花香味﹌/ 2022年05月22日 01:40/ 0 赞/ 252 阅读

相关 markdown本地图片上传

刚入markdown的坑，有道云笔记的markdown基础应用，可满足日常工作使用。作为小白，整理了一下有道云笔记的基础运用。在上传图片过程遇到的坑，填坑过程。 1

﹏ヽ暗。殇╰゛Y/ 2022年05月21日 10:35/ 0 赞/ 202 阅读

相关 markdown转图片

markdown转图片在chrome浏览.md文件选择无边框打印，保存pdf文件 [http://www.pdfdo.com/][http_www.

今天药忘吃喽~/ 2022年05月09日 05:33/ 0 赞/ 225 阅读

相关 Markdown直接插入图片

作者：LoveEmperor-王子様 Markdown直接插入图片 > 编辑工具：VScode，Gitbook等环境不在本文范围内安装两个图片插件：

心已赠人/ 2022年04月17日 07:11/ 0 赞/ 271 阅读