Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >MarkDown文件插入图片(绝对\相对路径\调整图像大小位置)

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

原创
作者头像
AomanHao
发布于 2024-03-02 09:43:51
发布于 2024-03-02 09:43:51
7K0
举报

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

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

代码语言:java
AI代码解释
复制
方法1![图片说明](图片有效链接网址)
方法2<img src="图片有效链接网址">

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

绝对路径和相对路径

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

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

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

路径使用

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

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

代码语言:java
AI代码解释
复制
方法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语法也不同,例如你的文章想法在不同的网站,可能会出现不兼容

代码语言:java
AI代码解释
复制
<div align=center>  <img src=".\Images\test.jpg" width=30%>  <img src=".\Images\test.jpg" width=30%></div>

5、图像居中展示

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

代码语言:java
AI代码解释
复制
<center class ='img'>
<img title="XX" src="图像网络链接" width="45%">
</center>

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

代码语言:java
AI代码解释
复制
<center class ='img'>
<img title="XX" src="图像1网络链接" width="45%">
<img title="XX" src="图像2网络链接" width="45%">
</center>

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

我的个人博客主页,欢迎访问
我的CSDN主页,欢迎访问
我的GitHub主页,欢迎访问
我的知乎主页,欢迎访问

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
绝对路径和相对路径(转)
1、相对路径-顾名思义,相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。
山河木马
2019/03/05
2.6K0
Hexo -4- 向文章添加图片的方法
这种相对路径的图片显示方法在博文详情页面显示没有问题,但是在首页预览页面图片将显示不出来。如果希望图片在文章和首页中同时显示,可以使用标签插件语法。
为为为什么
2022/08/04
1.9K0
Hexo -4- 向文章添加图片的方法
HTML引入文件的绝对路径、相对路径、根目录
什么是绝对路径?绝对路径指的是文件的真正路径,使用绝对路径链接外部资源,如:图片、超级链接、flash、音频、视频等等。代码如下:
德顺
2019/11/12
10.6K0
hexo博客中如何插入图片
Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令。
不作声
2020/10/30
4.4K0
hexo博客中如何插入图片
html图像标签、绝对路径和相对路径
像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。
Devops海洋的渔夫
2019/05/31
4K0
5. html图像标签、绝对路径和相对路径
像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。
Devops海洋的渔夫
2022/01/14
1.9K0
5. html图像标签、绝对路径和相对路径
相对路径和绝对路径
根目录下有demo1和images/1.jpg,demo1下有index1.html文件和demo1.1文件夹。demo1.1下有index2.html和2.jpg图片文件。
狼啸风云
2019/10/26
5.3K0
网站目录/绝对路径/相对路径-零基础搭建wordpress教程
网站基本知识包括很多方面,网站结构、网页路径、域名、服务器、建站等等,我们已经写过域名和新手如何选择服务器了,正好最近遇到群友对网站基本知识有些疑问,魏艾斯博客认为建站之前你一定要了解一下相关基础知识,通过这个过程在脑海中建立网站的一个结构,只有脑海里面有了这个理论知识后面建站时才能得心应手。
魏艾斯博客www.vpsss.net
2018/12/07
3.5K0
HTML的a标签href属性指定相对路径与绝对路径的用法讲解
在实际Web开发中,插入图片、包含CSS文件等都需要有路径,如果文件路径的添加错误,就会导致引用失效(无法浏览链接文件,或无法显示插入的图片等)。很多初学者感到困惑,下面我就详细的介绍一下相对路径与绝对路径。
Twcat_tree
2022/11/30
1.7K0
(转)母版页和相对路径
一个经常让开发人员疑惑的问题是母版页是如何处理相对路径的。如果你使用的是静态文字,这一问题不会困扰你。不过,如果你加入了<img>标签或者指向其他资源的HTML标签,问题就可能发生。
SAP梦心
2022/05/10
1.9K0
(转)母版页和相对路径
hexo&typora-文章编写
​ 日常习惯使用typora编辑器进行编辑,相关的图片引入均用相关路径进行引用(相同路径下构建同名.assets文件夹存储图片信息),这与hexo的一些使用有所差异,也就是说单纯的md内容,通过hexo渲染能够正常解析,但是针对一些资源的引用则需相应调整
hahah
2022/06/15
7000
[小知识点]绝对路径与相对路径.
1, 绝对路径与相对路径: 1.1 路径分为两种 第一种:绝对路径 (1)文件的完全路径, 比如:file:///C:/Users/asus/Desktop/1018/day01/code/图像标签.html 第二种:相对路径(*****) (1)一个文件相对于另外一个文件的位置 第一种情况:图片和html文件在一个文件夹下面 (1)在html中直接写图片的名称 第二种情况:图片在html的下层目录 (1)把html的完全路径和图片的完全路径写出来 html: C:\Users\
一枝花算不算浪漫
2018/05/18
2K0
VSCode Markdown 插入图片
https://book.crifan.com/books/best_editor_vscode/pdf/best_editor_vscode.pdf https://book.crifan.com/
云深无际
2021/04/28
2.4K0
VSCode Markdown 插入图片
搭建Hexo博客-第3章-Markdown语言介绍及编辑博客
大家好,如果你按照上一篇文章的内容安装并部署了博客,那么现在在你的主页上应该有一篇 Hello World,并且博客目前使用的主题是默认的 landscape ,现在我就来教你如何创作自己的文章。
CrystalGabrielle
2023/02/25
6220
Hexo系列(3) - NexT主题和Markdown的写作技巧
本系列主要介绍和hexo-NexT主题相关的一些写作技巧,可能会涉及到部分前端知识(不了解也没关系,能用就行)。我之所以选择hexo-NexT来搭建个人网站,一个很重要的原因就是因为简单、方便、快捷!不需要服务器,直接通过Markdown来进行写作,不仅文章布局美观,还可以节省大量的时间。
雨临Lewis
2022/01/11
1.4K0
Hexo系列(3) - NexT主题和Markdown的写作技巧
web路径问题相对路径和绝对路径,计算机相对路径和绝对路径
**首先得明白相对路径和绝对路径的概念和区别:** **相对路径:** 相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。使用相对路径可以为我们带来非常多的便利。 **绝对路径:** 绝对路径是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
用户1289394
2021/10/26
2.5K0
web项目中,视图层中关于相对路径和绝对路径
1.在jfinal项目中   因为一直使用的jfinal,没感觉路径问题。   举个栗子,项目名字叫做test.访问一个Controller的映射为/user/add.这样,在浏览器地址栏直接:localhost:8080/user/add就可以直接访问到add方法了。当然,这样需要通过配置不同的端口来发布不同的项目,不然肯定冲突了。端口指定项目的路径。 比如: <Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="t
Ryan-Miao
2018/03/13
1.8K0
wemark小程序Markdown渲染库渲染原生图片标签的问题
最近在使用Markdown渲染库wemark 的过程中遇到了图片不能显示的问题。 渲染库可以渲染markdown语法格式的图片,但是对于自定义大小了的原生图片标签却无法正常渲染,导致markdown文件中的图片无法正常显示。
薛定喵君
2020/05/31
1.5K0
【软考学习14】绝对路径和相对路径的区别和联系
比如我在 D 盘的某个文件夹下新建了一个 helloWorld.java 文件,如下图所示。
Designer 小郑
2023/08/01
9820
【软考学习14】绝对路径和相对路径的区别和联系
相对路径与绝对路径
🎏顾名思义:相对路径是更侧重对于文件与文件之间的联系,就像是以当前文件路径,然后去找其他文件的位置,而绝对路径而是一个完整的路径。 🎏抽象:就是说相对路径,比如你要到终点,那么你在起点到达中点,中点对于终点就是相对路径,起点到重点就是绝对路径。 举个例子: 相对路径: 🎏"." :目前所在的目录,相对路径。 如:超链接<a href="./">文本</a> 🎏".." :上一层目录,相对路径。 如:<a href="../">文本</a> 🎏"../../" : 代表的是上一层目录的上一层目录,
计算机魔术师
2022/08/19
1.6K0
相对路径与绝对路径
推荐阅读
相关推荐
绝对路径和相对路径(转)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档