MarkDown添加图片

原文链接】:MarkDown添加图片的三种方式[作者:清风Python]

插图最基础的格式就是:

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

Alt text:图片的Alt标签,用来描述图片的关键词,可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字,后来又被用于SEO,可以方便搜索引擎根据Alt text里面的关键词搜索到图片。
图片链接:可以是图片的本地地址或者是网址。
"optional title":鼠标悬置于图片上会出现的标题文字,可以不写。

一、插入本地图片

只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。
例如:

  • ![avatar](/home/picture/1.png)
  • ![avatar](./1.png)

在Windows的环境下,vscode等几种编译环境,如果填的是绝对路径,找不到文件,需要把文件放在当前目录下面。[待补充]

二、插入网络图片

只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选。
例如:

将图片存在网络服务器上,非常依赖网络。

三、把图片存入markdown文件

用base64转码工具把图片转成一段字符串,然后把字符串填到基础格式中链接的那个位置。

基础用法:

  • ![avatar](data:image/png;base64,iVBORw0......)

这个时候会发现插入的这一长串字符串会把整个文章分割开,非常影响编写文章时的体验。如果能够把大段的base64字符串放在文章末尾,然后在文章中通过一个id来调用,文章就不会被分割的这么乱了。高级用法
比如:

  • ![avatar][base64str]
  • [base64str]:data:image/png;base64,iVBORw0......

最后,base64的图片编码如何得来?

如果图片过大,这样生成的的base64字符串会过长,可以对图片进行无损压缩
1、使用python将图片转化为base64字符串

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

    file=open('332.txt','wb')
    file.write(ls_f)
    file.close()
    print(ls_f)#直接输出有时候会显示不全

2、 base64字符串转化为图片

    import base64
    #bs='iVBORw0KGgoAAAAN.....==' # 太长了省略
    f=open('332.txt','rb')
    imgdata=base64.b64decode(f.read())
    file=open('333.PNG','wb')
    file.write(imgdata)
    file.close()

原文地址:https://www.cnblogs.com/meiguhuaxian/p/12503429.html

时间: 2024-08-02 22:46:40

MarkDown添加图片的相关文章

MarkDown添加图片的三种方式【华为云技术分享】

Markdown插图片有三种方法,各种Markdown编辑器的插图方式也都包含在这三种方法之内. 插图最基础的格式就是: ![Alt text](图片链接 "optional title") 插入本地图片 只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径. 例如: ![avatar](/home/picture/1.png) 插入网络图片 只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选. 例如: ![avatar

关于hexo markdown添加的图片在github page中无法显示的问题

title: 关于hexo markdown添加的图片在github page中无法显示的问题 date: 2018-03-31 00:21:18 categories: methods tags: hexo markdown 云端 试了很多网站的图片,发现主要是CSDN和博客园的图片无法显示. 推荐用Bing或者Google搜索外网图片添加. 本地 在source目录下新建images目录,将要添加的图片存放在这个目录下,md引用时使用/images/... 原文地址:https://www.

关于利用input的file属性在页面添加图片的问题

在页面添加图片涉及到兼容的问题怎么解决兼容问题呢?请看下面分析: 在IE浏览器上面我们能直接通过获取其input的value值来获取其图片的路径. 在火狐和谷歌需要用createObjectURL((input的元素).files.item(0))来获取其路径: 现在请看代码: css设置样式部分(可以自己设置好看的样式): *{ margin: 0; padding:0; } #img{ width:50px; } .box{ width: 100px; margin:20px auto; }

向github的README文件中添加图片

1,向README文件中添加图片,用于展示程序效果或辅助说明! 两步: 首先,向github 上传所需的图片: 然后,打开README文件,写入图片的格式为: ![image](https://github.com/secondLieutenantCoder/TableAndCollection/blob/master/resut.png?raw=true) ![image](图片的URL) 图片写入成功!

Qt 怎么添加图片文件?

1.新建一个.qrc的文件 2.起个.qrc的文件名 3.完成后,添加图片文件 4.如图 就好了.

PHPCMS_单页添加图片字段

单页添加图片字段: <?php defined('IN_ADMIN') or exit('No permission resources.'); include $this->admin_tpl('header','admin');?> <div id="closeParentTime" style="display:none"></div> <link href="{CSS_PATH}dialog.css&

利用jquery移除和添加图片

利用jquery移除和添加图片 1.样式 <style type="text/css">     .changeImage{          background:url(images/right.png) no-repeat center;     } </style> 2.JS (1)在改变标签的样式,需要移除之前添加的样式 $("#tab tr").find("td").removeClass("chan

Java生成PDF文档(表格、列表、添加图片等)

需要的两个包及下载地址: (1)iText.jar:http://download.csdn.net/source/296416 (2)iTextAsian.jar(用来进行中文的转换):http://download.csdn.net/source/172399 代码如下: 1 import java.awt.Color; 2 import java.io.FileOutputStream; 3 import com.lowagie.text.Cell; 4 import com.lowagi

Android控件上添加图片

项目中有一个点赞功能,点赞的小图标添加在点赞列表旁边,在xml里可以进行设置,也可以在代码中进行绘图. 下面是两种方法的设置: 1.xml里:一些控件:button.textView等等里面有个属性是android:drawableLeft 就可以将pic设置到text的左边.good.... 2.代码中: TextView txtlikedList = new TextView(this.getContext()); Drawable drawable= getResources().getD