25、鸿蒙/组件/图片组件(Image)

开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考Image组件。

Image通过调用接口来创建，接口调用形式如下：

Image(src: PixelMap | ResourceStr | DrawableDescriptor)

加载图片资源

Image支持加载存档图、多媒体像素图两种类型。

• 本地资源
  创建文件夹，将本地图片放入ets文件夹下的任意位置。
  Image组件引入本地图片路径，即可显示图片（根目录为ets文件夹）

// 本地资源,图片位置ets/image
    Image('image/icon.png').width(100)

• 网络资源
  引入网络图片需申请权限ohos.permission.INTERNET，具体申请方式请参考声明权限。此时，Image组件的src参数为网络图片的链接。

  Image组件首次加载网络图片时，需要请求网络资源，非首次加载时，默认从缓存中直接读取图片，更多图片缓存设置请参考setImageCacheCount、setImageRawDataCacheSize、setImageFileCacheSize。

Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/0603public/sj-next-pc.jpeg')
        .width(200)

• Resource资源
  使用资源格式可以跨包/跨模块引入图片，resources文件夹下的图片都可以通过$r资源接口读 取到并转换到Resource格式。
  media.png
  调用方式(推荐这种方式)：

Image($r('app.media.background.png'))

还可以将图片放在rawfile文件夹下。

rawfile.png

调用方式：

Image($rawfile('startIcon.png'))

设置图片缩放类型

通过objectFit属性使图片缩放到高度和宽度确定的框内。

Column(){
        // 缩放
        Image($r('app.media.background'))
          .width(300)
          // 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
          // .objectFit(ImageFit.Contain)
            // 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
          // .objectFit(ImageFit.Cover)
            // 自适应显示。
          // .objectFit(ImageFit.Auto)
            // 不保持宽高比进行放大缩小，使得图片充满显示边界。
          // .objectFit(ImageFit.Fill)
            // 保持宽高比显示，图片缩小或者保持不变。
          // .objectFit(ImageFit.ScaleDown)
            // 保持原有尺寸显示。
          .objectFit(ImageFit.None)
}.backgroundColor(Color.Gray).width('100%').height(500)