前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >MarkDown文件插入图片(绝对\相对路径\调整图像大小位置)

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

原创
作者头像
AomanHao
发布2024-03-02 17:43:51
6870
发布2024-03-02 17:43:51
举报

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

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

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

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

绝对路径和相对路径

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

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

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

路径使用

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

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

代码语言:java
复制
方法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
复制
<div align=center>  <img src=".\Images\test.jpg" width=30%>  <img src=".\Images\test.jpg" width=30%></div>

5、图像居中展示

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

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

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

代码语言:java
复制
<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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、 插入网络图片(有效网络连接)
  • 2、插入本地图片(文件夹路径)
    • 绝对路径和相对路径
      • 路径使用
        • 我的个人博客主页,欢迎访问
        • 我的CSDN主页,欢迎访问
        • 我的GitHub主页,欢迎访问
        • 我的知乎主页,欢迎访问
    • 3、控制图片的大小
    • 4、设置图片的位置
    • 5、图像居中展示
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
    http://www.vxiaotou.com