uniapp中image和img的区别和使用方法

在uniapp开发中，<image>和<img>标签有什么区别？分别应该在什么场景下使用？比如加载本地图片、网络图片或者使用base64时，哪个标签更合适？它们的性能、兼容性和写法上有什么注意事项？能否举例说明两者的具体用法？

2 回复

uniapp中，image是官方组件，支持懒加载和错误处理；img是HTML标签，在uniapp中不推荐使用。
用法：
<image src="图片路径" mode="aspectFit"></image>
image的mode属性控制图片裁剪、缩放等显示效果。


在uni-app中，image和img标签的区别如下：

1. image标签（推荐使用）

  • uni-app官方提供的组件，专为多端适配优化。
  • 支持懒加载、错误占位图等增强功能。
  • 自动处理不同平台的图片路径和兼容性问题。

基本用法：

<image 
  src="/static/logo.png" 
  mode="aspectFit" 
  lazy-load
  @error="handleError"
></image>

属性说明：

  • src：图片路径（支持绝对路径、网络地址、base64）
  • mode：图片裁剪模式，常用值：
    • scaleToFill：拉伸填满（默认）
    • aspectFit：保持比例，完整显示
    • aspectFill：保持比例，填充容器
  • lazy-load：懒加载（页面滚动时加载）
  • @error：图片加载失败事件

2. img标签（不推荐）

  • 标准HTML标签，在uni-app中可能无法正常显示
  • 缺少跨平台优化，部分小程序平台不支持
  • 仅适用于H5端开发

使用建议：

  • 始终使用image组件保证多端兼容
  • 网络图片需配置域名白名单（manifest.json）
  • 本地图片建议存放于static目录

示例：配置网络图片域名

// manifest.json
"mp-weixin": {
  "appid": "",
  "setting": {},
  "requiredPrivateInfos": [],
  "permission": {},
  "optimization": {
    "subPackages": true
  }
}

总结：uni-app开发中请统一使用image组件，避免使用原生img标签以确保全平台兼容性。

回到顶部