Html中img标签怎么设置Base64格式图片源

封面图 • 2026-01-12 • Html/Css

在 HTML 中，`<img>` 标签可以通过设置 `src` 属性来引用 Base64 编码的图片。Base64 图片是将图片数据直接编码为字符串，并嵌入到 HTML 中，这样可以减少 HTTP 请求，适用于小图片或需要内联的场景。

### 基本格式如下：

```html
<img src="data:image/图片类型;base64,Base64编码后的图片数据" />
```

---

### 示例：使用 Base64 编码的 PNG 图片

```html
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACCCAMAAADQNkiAAAAA1BMVEX///+n3v8AAAAASUVORK5CYII=" />
```

---

### 示例：使用 Base64 编码的 JPEG 图片

```html
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2AAdDBQbG...（此处为Base64编码内容）" />
```

---

### 如何获取 Base64 编码？

你可以使用以下方法生成 Base64 图片数据：

#### 方法 1：在线工具（推荐）
- 使用 [https://www.base64-image.de/](https://www.base64-image.de/) 等网站上传图片，会自动生成 Base64 字符串。

#### 方法 2：使用 Python 脚本（示例）

```python
import base64

with open("image.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read()).decode('utf-8')

print(f"data:image/png;base64,{encoded_string}")
```

---

### 注意事项：

- **大小限制**：Base64 图片会增加文件体积（约 33%），不适合大图。
- **性能影响**：大量 Base64 图片可能会影响页面加载性能。
- **缓存问题**：Base64 图片无法被浏览器缓存，每次请求页面都会重新加载。

---

如需进一步帮助，比如如何将图片转为 Base64 或处理特定格式，请告诉我！