uniapp img组件的使用方法

在uniapp中使用img组件时，如何正确设置图片路径？我在项目中尝试使用相对路径和网络链接都显示失败，不知道是不是格式写错了。另外，img组件支持哪些图片格式？是否需要额外配置才能显示webp或svg这类格式？还有，如何实现图片懒加载和错误占位图功能？希望能得到具体的代码示例。

2 回复

uniapp中，使用img组件显示图片，src属性指定图片路径。支持本地和网络图片。示例：<img src="/static/logo.png" mode="aspectFit">。mode属性控制图片显示方式，如缩放、裁剪等。


在 UniApp 中，<img> 组件用于显示图片，但实际开发中推荐使用 <image> 组件（UniApp 官方封装，兼容多端）。以下是详细使用方法：

基本用法

<image src="/static/logo.png" mode="aspectFit"></image>
  • src：图片路径，支持本地路径（如 /static/ 目录）或网络 URL（需配置域名白名单）。
  • mode：图片裁剪/缩放模式，常用值：
    • scaleToFill（默认）：拉伸填满容器，可能变形。
    • aspectFit：保持宽高比，完整显示图片。
    • aspectFill：保持宽高比填充，可能裁剪。
    • widthFix：宽度固定，高度自适应。

常用属性

  1. 懒加载（节省流量）：
    <image lazy-load src="https://example.com/image.jpg"></image>
  2. 占位图与加载失败：
    <image 
  src="https://example.com/image.jpg" 
  :show-menu-by-longpress="true"
  @error="handleError"
>
  <view class="placeholder">加载中...</view>
</image>
    • @error：图片加载失败时触发事件。
    • show-menu-by-longpress：长按显示菜单（保存图片等）。

注意事项

  1. 本地路径建议放在 static 目录，编译后路径不变。
  2. 网络图片需在 manifest.json 的 networkTimeout 或各平台配置中设置域名信任。
  3. 大量图片建议使用懒加载优化性能。

示例代码

<template>
  <view>
    <!-- 本地图片 -->
    <image src="/static/avatar.jpg" mode="widthFix"></image>
    <!-- 网络图片（带懒加载） -->
    <image 
      lazy-load 
      mode="aspectFill" 
      src="https://via.placeholder.com/300" 
      @load="onImageLoad"
      @error="onImageError"
    />
  </view>
</template>

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

通过合理使用 mode 和懒加载，可有效提升图片显示效果和页面性能。

回到顶部