MarkDown添加图片的三种方式

在Markdown文件中快速插入本地图片 本文章主介绍如何在markdonw文件中快速地插入存储在本地的图片,以及对图片显示进行相关的控制。 阅读详情
AI摘要

本文介绍了Markdown中插入图片的三种方法:本地图片、网络图片及Base64编码图片,并提供了具体的使用示例与代码实现。

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

插图最基础的格式就是:

![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][doge]
[doge]:data:image/png;base64,iVBORw0......
然后,base64的图片编码如何得来?

图片转化为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-base64

  • 代码区域

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

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

【AI Studio平台基本操作】如何在项目里面添加图片文字信息或代码 AI Studio在项目里面添加图片文字信息或代码 阅读详情

相关推荐

Halcon手眼标定实战:九点标定法从入门到精通(附完整代码)

本文详细介绍了Halcon环境下九点标定法的完整实现流程,从基础概念到实战技巧,帮助开发者快速掌握手眼标定技术。通过精确采集图像坐标与机械坐标,计算仿射变换矩阵,实现相机与机械臂坐标系的精确映射,适用于工业自动化中的平面定位场景。

v4w5x6的博客 411

Markdown中插入图片

前言: 企业中产品手册少不了图片的插入,那如果用markdown维护手册的话,怎么插入图片呢?今天介绍以下几种方法:

qq_35332549的博客 5万+

Livox MID360与Fast-LIO2的实战部署指南:从驱动安装到点云处理

本文提供Livox MID360激光雷达与Fast-LIO2激光惯性里程计从零开始的实战部署指南。详细介绍了Ubuntu系统下的驱动安装、网络配置、点云数据验证以及Fast-LIO2算法的编译、参数配置与联合启动流程,帮助开发者快速搭建移动机器人SLAM系统,并包含关键参数调优与常见故障排查方法。

java5的博客 1024

markdown中插入本地图片

使用相对路径插入图片。比如你把一个叫做1.png的图片和*.md文件放在一起,那么你就可以用这种方式插入图片:![](1.png) 如果不想放在同一层级,那么就可以这样插入:![](foldername/1.png)表示引用同层级一个叫做"foldername"的文件夹中的1.png图片,以此类推. 应该所有markdown软件都支持这种语法吧,我用过的Mou ,macDown,Visual Studio Code等等是支持这种写法的。最大的优点就是不需要网络,做到本地存放图片。 ...

qq_40357974的博客 2万+

手把手教你:如何为自制的STM32H7飞控板适配PX4固件(基于NuttX)

本文详细介绍了如何为自制的STM32H7飞控板适配PX4固件,基于NuttX系统进行移植。从硬件设计规范到软件环境配置,再到PX4固件的移植与调试,提供了完整的实战指南。特别分享了如何复用FMU-v6u参考设计以节省开发时间,并解决了常见问题,帮助开发者快速实现高性能飞控系统的搭建。

weixin_27697385的博客 475

基于DPABI和SPM12的任务态fMRI分析笔记1——预处理

前言 原理简介 预处理

Sophia2023的博客 1万+

如何在markdown中插入图片

VSCode 会自动生成图片的 Markdown 语法(需确保拖拽到编辑区域)。插件会自动将图片保存到指定路径,并插入 Markdown 语法。直接将图片文件从资源管理器拖拽到 Markdown 编辑器中。复制图片到剪贴板(截图或本地图片)。:在 VSCode 扩展商店搜索。在 Markdown 文件中按。(Windows)或。

2301_81081569的博客 4543

基于Autoware制作高精地图(一)

基于Autoware制作高精地图(一) ​开始进入正题,也是最近在忙的一件事,制作高精地图。 高精地图的制作大概分为以下四个流程(不一定完全正确): 1.构建点云地图; 2.点云地图标注; 3.制作OpenDrive地图; 4.地图存储索引。 这篇文章主要讲解如何构建点云地图。 首先我们要有一段自己录制的激光雷达点云数据,这里推荐大家采用Velodyne16线激光雷达,因为这里我们构建的点云底图是三维的,而采用Velodyne而不是速腾聚创(rslidar)等其他品牌的原因是Autoware里面有一个选项是

weixin_44570248的博客 7799

markdown统一设置图片格式_MarkDown添加图片的三种方式

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

weixin_39564831的博客 1403

SAP ABAP 接口管理服务(ZIF)开源项目介绍

接口管理服务(ZIF)开源项目基于 SAP ABAP系统,是一款对标SAP PI/PO 的轻量接口管理产品。他通过独立开发包部署在ABAP系统中,包含接口注册、接口管理、日志服务及其他配套功能,拥有丰富的技术沉淀并通过市场检验,目前已被多家企业应用在SAP ERP系统中。

SAP李斌,本人承诺所有原创文章均不使用任何AI生成技术,请大家放心阅读。 1741

uniapp [全端兼容] - 实现接入使用天地图及卫星视图切换功能,在国家天地图上自由切换地图显示类型(卫星视图/地形视图/卫星混合/地形混合/普通视图)天地图切换视图显示改成卫星风格,切换地图图层

uni-app,h5移动端网页,微信小程序,支付宝小程序,Android安卓,苹果ios,app,nvue,天地图,视图,卫星,地图类型切换,uniAPP天地图,改成卫星视角,在线地图切换,来回切换卫星图,天地图如何实现来回切换卫星图,地形图,卫星视图,VUE3引入天地图卫星版,详细教程示例源码代码,天地图切换卫星用什么api,卫星视角API方法,vue3卫星天地图,能改地图的显示方式,vue3中使用天地图自定义样式切换地图图层,切换报错,加载出错,卫星图太卡,地图图层更换,vue3安装集成天地图详细示例源

🏆 前端领域优质创作者 1万+

python导入图片语法_MarkDown添加图片的三种方式

Markdown插入图片有三种方法插图最基础的格式就是:![Alt text](图片链接 "optional title")Alt text:图片的Alt标签,用来描述图片的关键词,可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字,后来又被用于SEO,可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接:可以是图片的本地地址或者是网址。"optional ti...

weixin_39620278的博客 920

2026年全国青少年信息素养大赛复赛真题(算法应用主题赛C++初中组:带解析)(7月4日试卷一)【文末附答案和解析】

2026年全国青少年信息素养大赛复赛真题(算法应用主题赛C++初中组:带解析)(7月4日试卷一)【文末附答案和解析】

王老师青少年编程 1737

markdown-it-emoji完全指南:如何为Markdown解析器添加表情符号支持

markdown-it-emoji是一款专为markdown-it解析器设计的表情符号插件,能够轻松为你的Markdown文档添加丰富的表情符号和颜文字支持。通过简单的配置,你可以让Markdown文本中的`:smile:`转换为😊,`:heart:`显示为❤️,让文档更生动有趣。 ## 快速安装:三步开启表情符号之旅 想要在你的Markdown项目中使用markdown-it-emoji,

gitblog_01136的博客 1056

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

Markdown中图片对齐方式及尺寸设置

markdown编辑模式下的图片对齐方式及尺寸大小调整方法

怕什么真理无穷,进一寸有一寸的欢喜 6万+

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

上一篇: collections 使用教程
下一篇: python推导式pythonic必备
清风 python
博客等级 码龄9年 64粉丝 75原创
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值