当前位置：首页 > uni-app

uniapp 图像显示

2026-03-05 01:39:18uni-app

uniapp 图像显示方法

在 uniapp 中显示图像可以通过多种方式实现，以下是常见的几种方法：

使用 `<image>` 组件

uniapp 提供了 <image> 组件用于显示图像，支持本地和网络图片。

<template>
  <view>
    <!-- 显示本地图片 -->
    <image src="/static/logo.png" mode="aspectFit"></image>

    <!-- 显示网络图片 -->
    <image src="https://example.com/image.jpg" mode="aspectFill"></image>
  </view>
</template>

mode 属性用于控制图片的显示模式，常用值包括：

uniapp 图像显示

scaleToFill：不保持纵横比缩放图片，使图片完全填充
aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来
widthFix：宽度不变，高度自动变化，保持原图宽高比不变

动态绑定图片路径

可以通过数据绑定动态设置图片路径：

<template>
  <view>
    <image :src="imageUrl" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/dynamic-image.jpg'
    }
  }
}
</script>

处理图片加载事件

可以监听图片加载成功或失败的事件：

uniapp 图像显示

<template>
  <view>
    <image 
      :src="imageUrl" 
      @load="onImageLoad" 
      @error="onImageError"
    ></image>
  </view>
</template>

<script>
export default {
  methods: {
    onImageLoad() {
      console.log('图片加载成功')
    },
    onImageError() {
      console.log('图片加载失败')
    }
  }
}
</script>

使用 base64 图片

可以直接使用 base64 编码的图片数据：

<template>
  <view>
    <image :src="base64Image" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      base64Image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'
    }
  }
}
</script>

图片懒加载

对于长列表中的图片，可以使用懒加载优化性能：

<template>
  <view>
    <image 
      v-for="item in list" 
      :key="item.id" 
      :src="item.image" 
      lazy-load
    ></image>
  </view>
</template>