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

2023 年 11 月 13 日

1539 次浏览

1262字数

## 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%

---

### [我的个人博客主页，欢迎访问](https://www.aomanhao.top/)

### [我的CSDN主页，欢迎访问](https://blog.csdn.net/Aoman_Hao)

### [我的GitHub主页，欢迎访问](https://github.com/AomanHao)

### [我的知乎主页，欢迎访问](https://www.zhihu.com/people/aomanhao-hao)

最后修改：2023 年 11 月 13 日

如果觉得我的文章对你有用，请随意赞赏

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

AomanHao • 2023 年 11 月 13 日