【转】MarkDown添加图片的三种方式
原文:https://www.jianshu.com/p/280c6a6f2594
-----------------------------------------------------
插图最基础的格式就是:
- 
Alt text:图片的Alt标签,用来描述图片的关键词,可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字,后来又被用于SEO,可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接:可以是图片的本地地址或者是网址。"optional title":鼠标悬置于图片上会出现的标题文字,可以不写。
插入本地图片
只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。
例如:
- 
不灵活不好分享,本地图片的路径更改或丢失都会造成markdown文件调不出图。
插入网络图片
只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选。
例如:
- 
将图片存在网络服务器上,非常依赖网络。
把图片存入markdown文件
用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置。
- 基础用法:

这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的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)
- base64字符串转化为图片
import base64
bs='iVBORw0KGgoAAAANSUhEUg....' # 太长了省略
imgdata=base64.b64decode(bs)
file=open('2.jpg','wb')
file.write(imgdata)
file.close()
作者:清风Python
链接:https://www.jianshu.com/p/280c6a6f2594
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
【转】MarkDown添加图片的三种方式的更多相关文章
- MarkDown添加图片的三种方式【华为云技术分享】
Markdown插图片有三种方法,各种Markdown编辑器的插图方式也都包含在这三种方法之内. 插图最基础的格式就是:  Alt text:图片的Alt标签,用来描述图片的关键词,可以不写.最初的本意是当图片 ...
- 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> ...
- Vue 引用图片的三种方式
首先给图片地址绑定变量 <template> <img :src="imgUrl"> </template> 在script中设置变量 < ...
- 1.PhotoShop缩小图片的三种方式
先声明,本人不是高前端的,若有不当或者不合理的地方,还望前端爱好者多多指教.此处只是留作个人记录备忘. PS中有三种缩小 1.视图缩小,那方法很多缩放工具.Ctrl+"-",导航器 ...
- Winform绑定图片的三种方式
1.绝对路径: this.pictureBox2.Image=Image.FromFile("D:\\001.jpg"); 2.相对路径: Application.StartupP ...
- mybatis批量添加数据的三种方式
原文地址:https://www.cnblogs.com/gxyandwmm/p/9565002.html
随机推荐
- close yarn install --check-files
To disable this check, please add `config.webpacker.check_yarn_integrity = false` to your Rails deve ...
- Spring boot后台搭建二集成Shiro添加Remember Me
上一片文章实现了用户验证 查看 当用户成功登录后,关闭浏览器,重新打开浏览器访问http://localhost:8080,页面会跳转到登录页,因为浏览器的关闭后之前的登录已失效 Shiro提供了R ...
- 怎么又出错了?盘点java中最容易出现的错误
现如今,java已经广泛应用各种软件开发领域.基于面向对象的设计,java屏蔽了诸如C,C++等语言的一些复杂性,提供了垃圾回收机制,平台无关的虚拟机技术,Java创造了一种前所未有的开发方式.所以, ...
- Java开发笔记(一百三十六)JavaFX的窗格
虽然Java自诞生之初就推出了AWT,紧接着第二版又推出升级后的Swing,打算在桌面开发这块大展拳脚:可是后来Java在服务器开发上大放异彩,在桌面开发上反而停滞不前,可谓失之J2SE收之J2EE. ...
- 函数的学习3——传递任意数量的实参&将函数存储在模块——参考Python编程从入门到实践
传递任意数量的实参 形参前加一个 * ,Python会创建一个已形参为名的空元组,将所有收到的值都放到这个元组中: def make_pizza(*toppings): print("\nM ...
- 利用Matlab实现PID控制仿真
该文转自博客园: https://www.cnblogs.com/kui-sdu/p/9048534.html %PID Controller clear, clc, close all; ts=0. ...
- hashlib 加密 与进度条
# 加密 ''' md5 = hashlib.md5() md5.update('how to use md5 in python hashlib?') #字节才可以 print md5.hexdig ...
- MongoDB初始化创建管理员账户登录
1.查看mongodb服务是否开启: ps -ef | grep mongod 2.管理员角色必须在启用--auth认证参数之前创建,否则会没有操作权限.如果之前已经创建过用户,请先删除. kill掉 ...
- quartz2.3.0(十三)数据库持久化定时器job任务和trigger触发器,在多个调度器实例情况下,由其它调度器实例恢复执行调度器宕机的job任务
一.初始化数据库11张quartz表:qrtz_* 先从官网下载好quartz2.3.0包:http://www.quartz-scheduler.org/downloads/ 解压后进入目录:q ...
- SpringBoot项目jar启动端口设置
SpringBoot项目打包后,在target下生成的jar文件可以使用 Java - jar 直接启动,指定端口号配置 java -jar epjs-eureka.jar --server.port ...