Image定义介绍
interface ImageInterface {
(src: string
- src:设置要加载的图片资源,支持从本地、网络和内存中加载图片,简单样例如下
Image属性介绍
declare class ImageAttribute extends CommonMethod<ImageAttribute> {
alt(value: string | Resource): ImageAttribute;
matchTextDirection(value: boolean): ImageAttribute;
fitOriginalSize(value: boolean): ImageAttribute;
fillColor(value: ResourceColor): ImageAttribute;
objectFit(value: ImageFit): ImageAttribute;
objectRepeat(value: ImageRepeat): ImageAttribute;
autoResize(value: boolean): ImageAttribute;
renderMode(value: ImageRenderMode): ImageAttribute;
interpolation(value: ImageInterpolation): ImageAttribute;
sourceSize(value: { width: number; height: number }): ImageAttribute;
syncLoad(value: boolean): ImageAttribute;
onComplete(
callback: (event?: {
width: number;
height: number;
componentWidth: number;
componentHeight: number;
loadingStatus: number;
}) => void,
): ImageAttribute;
onError(callback: (event?: { componentWidth: number; componentHeight: number }) => void): ImageAttribute;
onFinish(event: () => void): ImageAttribute;
}
- alt:设置占位图,图片显示之前先显示占位图,比如在加载网络图片或者图片加载失败时的场景。
- objectFit:设置图片的放缩类型,当
Image
组件大小和图片大小不同时指定图片的放缩类型, ImageFit
提供了以下5种匹配模式:
- Cover(默认值):保持图片宽高比进行放缩显示,使得图片完全显示在显示边界外。
- Contain:保持图片宽高比进行放缩显示,使得图片完全显示在显示边界内。
- Fill:不保持图片宽高比显示,是图片完全充满显示边界。
- None:保持图片原有尺寸显示,通常配合
objectRepeat
属性一起使用。 - ScaleDown:保持图片宽高比显示,使图片缩小或者保持不变的显示出来。
Image缓存设置
Image
组件没有提供图片缓存相关的 api ,ArkUI开发框架在 @system.app
模块内提供了图片的全局缓存策略,全局缓存策略使用了 LRU 算法:
- setImageCacheCount:设置内存中缓存解码后图片的数量上限,单位为 number。
- setImageRawDataCacheSize:设置内存中缓存解码前图片数据的大小上限,单位为字节。
- setImageFileCacheSize:设置图片文件缓存的大小上限,单位为字节。
在APP启动的时候,设置全局缓存策略,用法如下:
import app from '@system.app';
export default {
onCreate() {
console.info('Application onCreate')
app.setImageRawDataCacheSize(100 * 1024 * 1024) // 设置解码前图片数据内存缓存上限为100MB
},
onDestroy() {
console.info('Application onDestroy')
},
}