当前位置: 首页 > news >正文

MarkDown文件插入图片(绝对\相对路径\调整图像大小位置)

1、 插入网络图片(有效网络连接)

Markdown中插入图片的语法为,图片路径可以直接写入图片有效链接网址即可:

方法1:![图片说明](图片有效链接网址)
方法2:<img src="图片有效链接网址">

2、插入本地图片(文件夹路径)

绝对路径和相对路径

绝对路径是是带有盘符的链接,例如‘F:\image\test.png’;

相对路径md文件所在文件夹及子文件夹,例如md文件在‘F:\’内,‘F:\image\’、‘F:\test\’都是相对路径;

由于绝对路径在不同的环境下无法有效加载图片,比如你在电脑做的MD笔记,MD文件拷给别人,图像是绝对路径,图像路径不同就加载不出来,因此一般使用相对路径。

路径使用

在使用相对路径时,无法引用文件所在目录的上一层目录中的图片,只能引用该文件所在文件夹或子文佳佳中的图片。

例如md文件路径为:‘F:\文件\笔记.md’,若图片在‘F:\文件\’的文件夹和子文件夹下,才可以用相对路径,若图在‘F:\’目录或者其他盘符目录下,不能用相对路径。

方法1:![图片说明](.\Images\test.jpg)  
方法2:<img src=".\Images\test.jpg">  

3、控制图片的大小

控制图片的大小一般使用 HTML的 <img> 语法

注:不同网站支持的markdown语法不同,支不支持HTML语法也不同,例如你的文章想法在不同的网站,可能会出现不兼容

设置图像宽高和图像比例:

方法1:设置图片的宽和高像素值: <img src="图片路径" width = 300 height = 200>

方法2:设置缩放的比例:<img src="图片路径" width = 60%>

4、设置图片的位置

一般通过 <div>align属性来进行控制图片的位置,如: left, center, right 等

注:不同网站支持的markdown语法不同,支不支持HTML语法也不同,例如你的文章想法在不同的网站,可能会出现不兼容

<div align=center>  <img src=".\Images\test.jpg" width=30%>  <img src=".\Images\test.jpg" width=30%></div>

5、图像居中展示

注:不同网站支持的markdown语法不同,支不支持HTML语法也不同,例如你的文章想法在不同的网站,可能会出现不兼容

<center class ='img'>
<img title="XX" src="图像网络链接" width="45%">
</center>

进一步可改为两三张图片并排展示

<center class ='img'>
<img title="XX" src="图像1网络链接" width="45%">
<img title="XX" src="图像2网络链接" width="45%">
</center>

几张图片的width宽度大的和不要超过100%


我的个人博客主页,欢迎访问

我的CSDN主页,欢迎访问

我的GitHub主页,欢迎访问

我的知乎主页,欢迎访问

相关文章:

  • Hadoop原理,HDFS架构,MapReduce原理
  • LeetCode Hot之七:438. 找到字符串中所有字母异位词
  • Linux下C++调用python脚本实现LDAP协议通过TNLM认证连接到AD服务器
  • postswigger 靶场(CSRF)攻略-- 1.没有防御措施的 CSRF 漏洞
  • 【Python】 Python 使用 Pillow 处理图像:几何变换
  • C //例 7.12 用选择法对数组中10个整数按由小到大排序。
  • 基于JAX-WS实现RESTful形式的web服务端点(endpoint)
  • 【数据分享】2021-2023年我国主要城市逐月轨道交通运营数据
  • 家庭安全计划 挑战赛| 溺水预防
  • FTP、NFS、SAMBA系统服务一
  • Java: 实现电影信息管理系统 (javaBean)
  • 前端面试之事件循环
  • sqoop笔记(安装、配置及使用)
  • 【架构】后端项目经典分层架构介绍
  • DeepFool: a simple and accurate method to fool deep neural networks
  • 【从零开始安装kubernetes-1.7.3】2.flannel、docker以及Harbor的配置以及作用
  • canvas 高仿 Apple Watch 表盘
  • CentOS6 编译安装 redis-3.2.3
  • CentOS7 安装JDK
  • es6--symbol
  • gops —— Go 程序诊断分析工具
  • iOS仿今日头条、壁纸应用、筛选分类、三方微博、颜色填充等源码
  • Java反射-动态类加载和重新加载
  • Java知识点总结(JDBC-连接步骤及CRUD)
  • jdbc就是这么简单
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • PhantomJS 安装
  • Python 反序列化安全问题(二)
  • python大佬养成计划----difflib模块
  • SQLServer之创建数据库快照
  • TypeScript迭代器
  • vue2.0项目引入element-ui
  • Webpack 4 学习01(基础配置)
  • 从零开始的无人驾驶 1
  • 从输入URL到页面加载发生了什么
  • 判断客户端类型,Android,iOS,PC
  • 推荐一款sublime text 3 支持JSX和es201x 代码格式化的插件
  • 学习ES6 变量的解构赋值
  • 验证码识别技术——15分钟带你突破各种复杂不定长验证码
  • 一起来学SpringBoot | 第十篇:使用Spring Cache集成Redis
  • Linux权限管理(week1_day5)--技术流ken
  • 数据可视化之下发图实践
  • ​软考-高级-信息系统项目管理师教程 第四版【第19章-配置与变更管理-思维导图】​
  • #LLM入门|Prompt#3.3_存储_Memory
  • #NOIP 2014# day.2 T2 寻找道路
  • #我与虚拟机的故事#连载20:周志明虚拟机第 3 版:到底值不值得买?
  • (01)ORB-SLAM2源码无死角解析-(56) 闭环线程→计算Sim3:理论推导(1)求解s,t
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (3)Dubbo启动时qos-server can not bind localhost22222错误解决
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (考研湖科大教书匠计算机网络)第一章概述-第五节1:计算机网络体系结构之分层思想和举例
  • (区间dp) (经典例题) 石子合并
  • (太强大了) - Linux 性能监控、测试、优化工具
  • (学习日记)2024.01.19
  • (一)插入排序