uniapp image组件的使用方法

在uniapp中使用image组件时，如何正确设置src路径？本地图片和网络图片的加载方式有什么区别？如何实现图片懒加载和错误占位图？另外，image组件支持哪些常用的属性配置，比如mode、lazy-load等，具体如何使用？在不同平台上是否有兼容性问题需要注意？

2 回复

uniapp中，使用<image>组件显示图片，支持本地和网络路径。常用属性：

  • src：图片路径
  • mode：图片裁剪、缩放模式
  • lazy-load：懒加载

示例：

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

注意：网络图片需配置域名白名单。


UniApp 中 <image> 组件用于显示图片，支持本地和网络资源。以下是核心使用方法：

基础用法

<template>
  <view>
    <!-- 本地图片（需放在 static 目录） -->
    <image src="/static/logo.png" mode="aspectFit"></image>
    
    <!-- 网络图片 -->
    <image src="https://example.com/image.jpg" mode="scaleToFill"></image>
  </view>
</template>

关键属性说明

  1. src（必填）

    • 本地路径：/static/xxx.png（根目录 static 文件夹）
    • 网络地址：需配置合法域名（在 manifest.json 的 Web 配置中）

  2. mode（重要）
    常用模式：

    • scaleToFill：拉伸填满（可能变形）
    • aspectFit：保持比例，完整显示（留黑边）
    • aspectFill：保持比例，填满容器（部分裁剪）
    • widthFix：宽度固定，高度自适应

  3. 懒加载

    <image lazy-load src="url" />

    （仅小程序和 App 生效）

  4. 事件处理

    <image 
  @load="onImageLoad" 
  @error="onImageError"
  src="url"
/>

    methods: {
  onImageLoad(e) {
    console.log('图片加载成功', e.detail)
  },
  onImageError(e) {
    console.log('图片加载失败', e.detail)
  }
}

注意事项

  • 本地图片建议使用绝对路径 /static/
  • 网络图片需注意跨域问题（H5 端）
  • 默认宽度 300px、高度 225px，建议通过 CSS 设置具体尺寸
  • 可使用 webp 格式优化体积（需平台支持）

通过合理设置 mode 属性和尺寸控制，可实现各种图片展示效果。

回到顶部