学习笔记（十六）：ArkUi-显示图片 (Image)

概述：

Image支持多种图片格式，包括png、jpg、bmp、svg、gif和heif

可支持显示本地图片，网络图片,Resource资源、媒体库资源和base64

一、创建Image

Image(src: PixelMap | ResourceStr | DrawableDescriptor)

1、显示本地资源

创建文件夹，将本地图片放入ets文件夹下的任意位置。

Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）

如下，自己定义一个文件夹未 icons

2、显示网络资源

3、显示Resource资源

将图片放置media目录下

创建写法：

Image($r('app.media.icon_b'))

 

 

二、Image相关属性

1、objectFit，设置缩放类型

ImageFit.Contain:  保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。

ImageFit.Cover: 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。

ImageFit.Auto: 自适应显示

ImageFit.Fill: 不保持宽高比进行放大缩小，使得图片充满显示边界。

ImageFit.ScaleDown: 保持宽高比显示，图片缩小或者保持不变

ImageFit.ScaleDown: 保持宽高比显示，图片缩小或者保持不变

 官方示例：

三、同步加载图片

一般情况下，图片加载流程会异步进行，以避免阻塞主线程，影响UI交互。

但是特定情况下，图片刷新时会出现闪烁，这时可以使用syncLoad属性，使图片同步加载，从而避免出现闪烁。

不建议图片加载较长时间时使用，会导致页面无法响应。

Image('httpUrl')
          .width(300)
          .height(300)
          .syncLoad(true) // 设置同步加载