MarkDown添加图片的三种方式【华为云技术分享】
Markdown插图片有三种方法，各种Markdown编辑器的插图方式也都包含在这三种方法之内。
插图最基础的格式就是：
插入本地图片
只需要在基础语法的括号中填入图片的位置路径即可，支持绝对路径和相对路径。
例如：
插入网络图片
只需要在基础语法的括号中填入图片的网络链接即可，现在已经有很多免费/收费图床和方便传图的小工具可选。
例如：
把图片存入markdown文件
用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。
基础用法：
 这个时候会发现插入的这一长串字符串会把整个文章分割开，非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾，然后在文章中通过一个id来调用，文章就不会被分割的这么乱了。
比如：
![avatar][doge]
[doge]:data:image/png;base64,iVBORw0......
然后，base64的图片编码如何得来？
图片转化为base64字符串
base64字符串转化为图片
效果演示
- 图片展示区域
代码区域
[base64str]:data:image/png;base64,iVBORw0KGg...
感觉这么二笔的做法要把自己卡挂了，但有时候就得暴力一点，哈哈…
来源：华为云社区 作者：清风Python
HDC.Cloud 华为开发者大会2020 即将于2020年2月11日-12日在深圳举办，是一线开发者学习实践鲲鹏通用计算、昇腾AI计算、数据库、区块链、云原生、5G等ICT开放能力的最佳舞台。
MarkDown添加图片的三种方式【华为云技术分享】的更多相关文章
- MarkDown添加图片的三种方式
插图最基础的格式就是:  Alt text:图片的Alt标签,用来描述图片的关键词,可以不写.最初的本意是当图片 ...
- 【转】MarkDown添加图片的三种方式
原文:https://www.jianshu.com/p/280c6a6f2594 ----------------------------------------------------- 插图最基 ...
- markdown 显示图片的三种方式
插入网络图片 插入本地图片 base64 图片(data:image/png;base64,iVBORw0KG........) ps:base64编码的图片可以通过站长工具编码 https://to ...
- AndroidStudio中添加依赖的三种方式以及如何引入so文件和arr文件
AndroidStudio中添加依赖的三个选项,如图: 分别为:库依赖(Library dependency).文件依赖(File dependency)和module依赖(Module dep ...
- Js构造对象-添加方法的三种方式
Js构造函数添加方法有多种方案,来看一个混合方式构造函数的例子:申明person构造函数,有两个属性,name,qq.在原型上添加方法showname.这是最常用的方法. <script> ...
- Too many open files的四种解决办法【华为云技术分享】
[摘要] Too many open files有四种可能:一 单个进程打开文件句柄数过多,二 操作系统打开的文件句柄数过多,三 systemd对该进程进行了限制,四 inotify达到上限. 领导见 ...
- Python开发GUI工具介绍，实战：将图片转化为素描画！【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- MySQL数据库开发的36条原则【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 补习系列(12)-springboot 与邮件发送【华为云技术分享】
目录 一.邮件协议 关于数据传输 二.SpringBoot 与邮件 A. 添加依赖 B. 配置文件 C. 发送文本邮件 D.发送附件 E. 发送Html邮件 三.CID与图片 参考文档 一.邮件协议 ...
随机推荐
- group by 两个字段
group by 的简单说明: group by 一般和聚合函数一起使用才有意义,比如 count sum avg等 使用group by的两个要素: (1) 出现在select后面的字段 要么 ...
- Kubernetes基础服务架构图
最近看了一些kubernetes的相关资料, 简单的画了一个原理图 欢迎大家批阅
- ARM开发板上查看动态库或者可执行程序的依赖关系
以ARM32开发板为例,在/lib下有一个名为ld-linux-armhf.so.3的可执行程序(在ARM64开发板上是/lib/ld-linux-aarch64.so.1),这个程序负责加载可执行程 ...
- php对接app支付宝支付出错Cannot redeclare Decrypt()
报错原因: alipaySDK中定义的Encrypt()/Decrypt()函数与Laravel中定义的Encrypt()/Decrypt()函数重名了. 解决办法: 修改alipaySDK中定义的函 ...
- node中glob模块总结
参考文章: githup_glob node-glob学习 前言: 最近在学习webpack配置, 其中有一项glob配置入口文件, 来获取对应的文件名, 达到入口entry和output文 ...
- java String 常用方法
String方法 class CeShi{ public static void main(String[] args) { //toCharArray char chararraryone[]=&q ...
- uboot向kernel的传参机制——bootm与tags
http://blog.csdn.net/skyflying2012/article/details/35787971 最近阅读代码学习了uboot boot kernel的过程以及uboot如何传参 ...
- Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）
Flex布局 Flex即Flexible Box,写法为:display:flex(旧版:display: -webkit-box) 在Webkit内核下,需要加-webkit前缀: .box{ di ...
- 各类app的小结
各类app小结: 一.原生app: 二.webapp: 无法调用底层设备的api 三.混合app的方法: 1.原生app 嵌入 2.flutter 3.react native 4.AppCan( ...
- contest2 CF989 div2 ooox? ooox? oooo?
题意 div2C (o) 在\(小于50*50\)的棋盘上放\(A, B, C, D\)四种花, 并给出每种花的连通块数量\(a, b, c, d(\le 100)\), 输出一种摆法 div2D ( ...