MarkDown添加图片的三种方式

清风Python 发表于 2018/04/23 09:54:21 2018/04/23
【摘要】 Markdown插图片有三种方法,各种Markdown编辑器的插图方式也都包含在这三种方法之内。插图最基础的格式就是:![Alt text](图片链接 "optional title")插入本地图片只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。 例如: ![avatar](/home/picture/1.png)插入网络图片只需要在基础语法的括号中填入图片的网络链接...

Markdown插图片有三种方法,各种Markdown编辑器的插图方式也都包含在这三种方法之内。

插图最基础的格式就是:

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

image.png

插入本地图片

只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。 
例如: 
![avatar](/home/picture/1.png)

image.png

插入网络图片

只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选。 
例如: 
![avatar](http://baidu.com/pic/doge.png)

image.png

把图片存入markdown文件

用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置。 
基础用法: 
![avatar](data:image/png;base64,iVBORw0......) 
这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾,然后在文章中通过一个id来调用,文章就不会被分割的这么乱了。 
比如: 
![avatar][doge] 
[doge]:data:image/png;base64,iVBORw0...... 
然后,base64的图片编码如何得来?

图片转化为base64字符串

image.png

base64字符串转化为图片

image.png

效果演示

  • 图片展示区域 

image.png

  • 代码区域

  • [base64str]:data:image/png;base64,iVBORw0KGg...

感觉这么二笔的做法要把自己卡挂了,但有时候就得暴力一点,哈哈…


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。