当前位置：首页 > uni-app

uniapp 图像显示

2026-02-05 23:55:27uni-app

图像显示方法

在UniApp中显示图像可以使用<image>组件，该组件支持本地图片和网络图片的显示。

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

src属性指定图片路径，可以是相对路径、绝对路径或网络URL。mode属性控制图片的显示模式，常用值包括aspectFit（保持宽高比，完整显示图片）、aspectFill（保持宽高比，填充容器）和scaleToFill（拉伸填充）。

动态绑定图片路径

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

uniapp 图像显示

<template>
  <image :src="imageUrl" mode="widthFix"></image>
</template>

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

图片懒加载

对于长列表中的图片，可以使用lazy-load属性实现懒加载，提升页面性能。

<image 
  src="https://example.com/image.jpg" 
  lazy-load 
  mode="aspectFill"
></image>

图片预览功能

通过@click事件触发图片预览，调用uni.previewImageAPI。

uniapp 图像显示

<image 
  src="/static/photo.jpg" 
  mode="aspectFit" 
  @click="previewImage('/static/photo.jpg')"
></image>

<script>
export default {
  methods: {
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        current: 0
      })
    }
  }
}
</script>

处理图片加载失败

通过@error事件捕获图片加载失败情况，显示占位图。

<image 
  :src="imageUrl" 
  mode="aspectFit" 
  @error="handleImageError"
></image>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
      placeholder: '/static/placeholder.png'
    }
  },
  methods: {
    handleImageError() {
      this.imageUrl = this.placeholder
    }
  }
}
</script>

图片裁剪与压缩

上传图片时可以使用uni.chooseImage配合uni.compressImage进行压缩处理。

uni.chooseImage({
  count: 1,
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0]
    uni.compressImage({
      src: tempFilePath,
      quality: 80,
      success: (compressedRes) => {
        console.log(compressedRes.tempFilePath)
      }
    })
  }
})