在微信小程序中，图片展示主要通过以下几种方式实现：

• <image> 标签（不支持 img 标签）
• 背景图（CSS 中使用 background-image）
• 图片路径：本地路径、网络路径、Base64 编码

📌 一、图片展示方式详解

1. <image> 标签

• 作用：用于在 WXML 中插入图片。
• 特点：
  • 支持缩放模式（mode 属性控制裁剪/缩放行为）
  • 支持懒加载（默认开启）
  • 不支持 CSS 中的 background-image
• 支持类型：
  • 本地路径（如 /static/images/icon.png）
  • 网络路径（如 https://example.com/image.png）
  • Base64（需注意大小限制）

<image src="/static/images/icon.png" mode="aspectFit"></image>

2. 背景图（CSS 中使用 background-image）

• 作用：用于设置组件背景图。
• 特点：
  • 不支持 Base64 在 CSS 文件中直接使用（但可以在内联样式中使用）
  • 不支持网络图片作为背景图（除非配置域名白名单）
  • 必须使用本地资源路径或 Base64（仅限内联）

.view {
  width: 100px;
  height: 100px;
  background-image: url('/static/images/bg.png');
}

3. 本地路径（Local Path）

• 定义：项目目录内的相对路径或绝对路径。
• 用途：适合静态资源，打包时会编译进小程序包体。
• 限制：不能动态加载外部资源。

4. 网络路径（Remote URL）

• 定义：指向服务器上的图片地址。
• 用途：适合动态内容、用户上传图片等。
• 限制：
  • 需要配置域名白名单（开发环境可跳过）
  • 加载速度受网络影响

5. Base64 编码

• 定义：将图片转换为字符串嵌入代码。
• 用途：适合小图标、减少 HTTP 请求。
• 限制：
  • 增加代码体积
  • 小程序有 Base64 大小限制（一般不超过 5MB）

<image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."/>

✅ 对比总结表格

💡 使用建议

• 优先使用 <image> 标签：功能最全面，支持多种资源类型。
• 背景图谨慎使用：避免使用网络图作为背景，容易导致渲染失败。
• Base64 控制大小：适用于小图标，避免过大影响性能。
• 网络图片需配置域名：上线前务必配置好合法域名白名单。
• 本地资源打包优化：适合静态资源，提升加载速度。