【转】MarkDown添加图片的三种方式
原文:https://www.jianshu.com/p/280c6a6f2594
-----------------------------------------------------
插图最基础的格式就是:
- ![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)
- 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](图片链接 "optional title&q ...
- MarkDown添加图片的三种方式
插图最基础的格式就是: ![Alt text](图片链接 "optional title") 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
随机推荐
- soapUI使用-调用post方法
前言 soapUI的安装请查看此链接:https://www.cnblogs.com/linxiu-0925/p/10138771.html 使用步骤 1打开soapUI 2新建一个项目:New SO ...
- public interface ICloneable
using System.Runtime.InteropServices; namespace System{ // // 摘要: // 支持克隆,即用与现有实例相同的值创建类的新实例. [ComVi ...
- centos php7.1 redis4.0.9 安装扩展phpredis
1.扩展列表 https://github.com/phpredis/phpredis/releases [root@VM_27_0_centos server]# ls data lib.pl my ...
- DHCP配置实例(含DHCP中继代理)
https://blog.51cto.com/yuanbin/109759. DHCP配置实例(含DHCP中继代理) 某公司局域网有192.168.1.0/24和192.168.2.0/24这两个 ...
- Logstash+ Kafka基于AOP 实时同步日志到es
Logstash是一个开源数据收集引擎,具有实时管道功能.Logstash可以动态地将来自不同数据源的数据统一起来,并将数据标准化到你所选择的目的地,logstash丰富的插件(logstash-in ...
- 使用qmlscene命令来快速查看编辑的qml文件的实际效果图
一片金灿灿的树叶落下来,仿佛飞来了许许多多翩翩起舞的黄蝴蝶. Qt SDK 提供 了 一个 命令行 环境, 给那些 有 特殊 需求 的 开发者, 方便 他们 在 不 使用 Qt Creator 集成 ...
- FineUI window弹层设置
需在页面先设置 <f:Window ID="Window1" runat="server" Height="600px" Widt ...
- 使用Spring CROS解决项目中的跨域问题
CROS(Cross-Origin Resource Sharing) 用于解决浏览器中跨域请求的问题.简单的Get请求可以使用JSONP来解决,而对于其它复杂的请求则需要后端应用的支持CROS.Sp ...
- flask框架(五)——支持正则写法、模板用法、请求响应、session
如果用正则的话,我们要用自定义的路由. 1导入from werkzeug.routing import BaseConverter 2我先要写一个类,然后继承BaseConverter,然后实现__i ...
- python爬虫-《笔趣看》网小说《悟空看私聊》
小编是个爱看小说的人,哈哈 # -*- coding:UTF-8 -*- ''' 类说明:下载<笔趣看>网小说<悟空看私聊> ''' from bs4 import Beaut ...