简体中文
组件类型:UniImageElement
图片
Android | iOS | web |
---|---|---|
3.9 | 4.11 | 4.0 |
名称 | 类型 | 默认值 | 描述 | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
src | string(string.ImageURIString) | - | 图片资源地址 | ||||||||||||||||||||||||||||||
mode | string | "scaleToFill" | 图片裁剪、缩放的模式 | ||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||
lazy-load | boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | ||||||||||||||||||||||||||||||
fade-show | boolean | false | 图片显示动画效果 | ||||||||||||||||||||||||||||||
draggable | boolean | false | 鼠标长按是否能拖动图片(仅H5平台) | ||||||||||||||||||||||||||||||
@error | (event: UniImageErrorEvent) => void | - | 图片加载错误时触发,event.detail = { errMsg } | ||||||||||||||||||||||||||||||
@load | (event: UniImageLoadEvent) => void | - | 图片加载完成时触发,event.detail = { width: '图片宽度px', height: '图片高度px' } |
Android | iOS | web | |
---|---|---|---|
scaleToFill | 3.9 | 4.11 | 4.0 |
aspectFit | 3.9 | 4.11 | 4.0 |
aspectFill | 3.9 | 4.11 | 4.0 |
widthFix | 3.9 | 4.11 | 4.0 |
heightFix | 3.9 | 4.11 | 4.0 |
top | 3.9 | 4.11 | 4.0 |
bottom | 3.9 | 4.11 | 4.0 |
center | 3.9 | 4.11 | 4.0 |
left | 3.9 | 4.11 | 4.0 |
right | 3.9 | 4.11 | 4.0 |
top left | 3.9 | 4.11 | 4.0 |
top right | 3.9 | 4.11 | 4.0 |
bottom left | 3.9 | 4.11 | 4.0 |
bottom right | 3.9 | 4.11 | 4.0 |
名称 | 类型 | 必填 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniImageErrorEventDetail | 是 | - | |||||||||||
| ||||||||||||||
bubbles | boolean | 是 | - | 是否冒泡 | ||||||||||
cancelable | boolean | 是 | - | 是否可以取消 | ||||||||||
type | string | 是 | - | 事件类型 | ||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | ||||||||||
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
名称 | 类型 | 必填 | 默认值 | 描述 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
detail | UniImageLoadEventDetail | 是 | - | ||||||||||||||||
| |||||||||||||||||||
bubbles | boolean | 是 | - | 是否冒泡 | |||||||||||||||
cancelable | boolean | 是 | - | 是否可以取消 | |||||||||||||||
type | string | 是 | - | 事件类型 | |||||||||||||||
target | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
currentTarget | UniElement | null | 否 | - | UVUE DOM 元素对象,描述了 UVUE DOM 元素所普通具有的属性和方法。 | |||||||||||||||
timeStamp | number | 是 | - | 事件发生时的时间戳 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
stopPropagation | () => void | 是 | - | 阻止当前事件的进一步传播 |
preventDefault | () => void | 是 | - | 阻止当前事件的默认行为 |
web端支持的图片格式,不同浏览器有差异,可查询caniuse。
app端支持的图片格式如下:
如需其他图片格式,可自行开发uts组件插件或搜索插件市场,如
本地路径/static方式
由于uni-app编译时,只把/static目录下的静态资源copy到app中,所以src均需指向/static目录下。
其他目录的图片由于不会被打包进去,所以无法访问。
本地路径的大小写,安卓端在真机运行时由于运行在sd卡上所以不敏感,但在打包后整合到apk中由于Android系统的要求是大小写敏感的。iOS端始终是大小写敏感的。
本地绝对路径file:///方式
形如file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__4517034/www/static/test-image/logo.png
。
访问本应用内的资源时无需使用本方式,推荐使用/static方式。上述地址受包名、appid影响。
file:///方式一般用于download等公共目录。使用前需确保拥有相关权限。
支持网络路径
支持http、https。
安卓端image组件内部使用facebook的fresco库(2.5.0),自带缓存策略,也会自动清理缓存。 iOS端image组件内部使用SDWebImage库(5.10.0),自带缓存策略,默认7天缓存,缓存过期后会自动清理。
Android | iOS | web | |
---|---|---|---|
src | 3.9 | 4.11 | 4.0 |
mode | 3.9 | 4.11 | 4.0 |
lazy-load | x | 4.11 | x |
fade-show | 3.9 | x | x |
draggable | x | x | 4.0 |
@error | 3.9 | 4.11 | 4.0 |
@load | 3.9 | 4.11 | 4.0 |
不可以嵌套组件
Template
Script
<template>
<view style="flex: 1;">
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-center" style="background:#FFFFFF;">
<image class="image" :fade-show="true" mode="widthFix" :src="imageSrc" @error="error" @load="load"></image>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageFormat">图片格式示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageMode">图片缩放模式示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imagePath">图片路径示例</button>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="imageLarge">大图示例</button>
</view>
</view>
<view v-if="autoTest">
<image :src="setCookieImage"></image>
<image :src="verifyCookieImage" @error="error"></image>
</view>
</view>
</template>
<style>
.image {
margin: 20px auto;
width: 100px;
}
</style>