ArkUI中Image组件：解锁图片显示的无限可能

通过对 ArkUI 中 Image 组件的深入探索，我们全面掌握了它在图片显示方面的核心知识点。从基础的创建操作，到多样数据源的加载方式，再到各种属性的精细设置，以及网络图片加载的进阶技巧和实际应用场景的展示，Image 组件展现出了强大的功能和丰富的灵活性。在实际开发中，希望大家能够充分利用这些知识，深入探索和应用 Image 组件。无论是打造精美的登录界面，还是构建功能丰富的图片展示页面，都可

大雨淅淅1999

963人浏览 · 2025-06-07 22:48:03

大雨淅淅1999 · 2025-06-07 22:48:03 发布

（三）Resource 资源加载：跨包 / 跨模块的资源共享

（四）媒体库资源加载：探索设备的图像宝库

（五）base64 加载：数据存储的特殊方式

一、引言：开启图片显示新旅程

在鸿蒙应用开发的广袤天地中，ArkUI 就如同一位神奇的工匠，为开发者们打造出一个个精美绝伦的用户界面。它作为鸿蒙系统应用界面的核心 UI 开发框架，承载着丰富的功能与无限的可能，不仅提供了简洁直观的 UI 语法，让代码书写如行云流水般顺畅；还内置了大量多态组件，涵盖基础组件、容器组件、绘制组件以及媒体组件等，宛如一个装满宝藏的百宝箱，满足开发者多样化的需求；其强大的动画机制和灵活的事件交互能力，更是为应用赋予了生命与活力，使其在众多应用中脱颖而出，成为用户眼中的焦点。

在这琳琅满目的组件大家庭里，今天我们要聚焦的主角是 Image 组件。它虽看似普通，却在应用的视觉呈现中扮演着举足轻重的角色，是开启图片显示奇妙之旅的关键钥匙。无论是展示产品的精美图片，让用户一眼就被吸引；还是呈现风景的秀丽画面，为用户带来身临其境的感受；亦或是在游戏中展现炫酷的特效，增强用户的沉浸体验，Image 组件都能游刃有余地完成任务，成为连接用户与应用的视觉桥梁，让应用的魅力通过一张张精美的图片得以完美展现。

二、创建 Image 组件基础操作

想要在鸿蒙应用中展示图片，使用 ArkUI 的 Image 组件无疑是最直接有效的方式。它的创建过程并不复杂，就像搭建积木一样，只需按照一定的规则组合，就能轻松实现图片的显示。

创建 Image 组件的基本语法十分简洁明了，我们可以通过以下方式进行创建：

Image(图片数据源)

这里的 “图片数据源”，就像是打开图片世界的钥匙，它可以是本地图片资源，也可以是网络图片链接，不同的钥匙，将为我们开启不同的图片展示之旅。

（一）引入本地图片

当我们选择使用本地图片时，首先要将图片放置在对应工程模块下的 resources/base/media 文件夹中。这就好比将珍贵的宝藏存放在一个安全的宝箱里，等待着被调用。然后，通过 $r 资源接口来引用图片，具体代码示例如下：

Image($r('app.media.图片文件名'))

.width(200)

.height(200)

在上述代码中，$r('app.media.图片文件名') 就像是一把精准的钥匙，准确地找到了宝箱中的宝藏，即我们需要展示的本地图片。而 .width(200) 和 .height(200) 则像是为图片量身定制的展示窗口，规定了图片在界面中显示的宽度和高度为 200 虚拟像素（vp），让图片能够以合适的大小呈现在用户面前。

（二）引入网络图片

如果我们想要引入网络图片，只需将图片的网络链接作为参数传递给 Image 组件即可，示例代码如下：

Image('https://example.com/图片链接.jpg')

.width(300)

.height(300)

这里的 https://example.com/图片链接.jpg 就是通往网络图片宝藏的路径，通过这个路径，我们可以将网络上的精美图片引入到应用中进行展示。同样，.width(300) 和 .height(300) 为网络图片设置了显示的宽度和高度为 300 虚拟像素（vp）。

不过，需要特别注意的是，在使用网络图片时，就像进入一个需要特殊权限的神秘领域，我们必须申请网络访问权限 ohos.permission.INTERNET。这是为了确保应用在获取网络图片时的合法性和安全性。我们可以在 module.json5 文件中进行权限申请，具体配置如下：

{

"module": {

"name": "entry",

"type": "entry",

"description": "$string:module_desc",

"mainElement": "EntryAbility",

"deviceTypes": ["phone", "tablet", "2in1"],

"requestPermissions": [

{

"name": "ohos.permission.INTERNET",

"reason": "$string:reason",

"usedScene": {

"abilities": ["FormAbility"],

"when": "inuse"

}

]

}

在这个配置中，requestPermissions 字段就像是一个权限管理中心，我们在其中声明了需要申请的网络访问权限 ohos.permission.INTERNET，并说明了申请的原因和使用场景，只有这样，应用才能顺利地从网络上获取图片并进行展示。

三、多样数据源加载大揭秘

在实际应用开发中，图片的来源丰富多样，就像一个庞大的资源库，包含了本地资源、网络资源、Resource 资源、媒体库资源和 base64 等不同类型的数据。而 ArkUI 的 Image 组件就像是一位全能的搬运工，能够轻松地加载这些不同来源的图片，为应用增添丰富的视觉元素。下面，我们就来深入了解一下这些不同数据源的加载方式及其特点。

（一）本地资源加载：便捷的本地宝藏挖掘

将本地图片放置在 ets 文件夹下的任意位置，就可以通过 Image 组件引入本地图片路径来显示图片，根目录为 ets 文件夹。示例代码如下：

Image('images/view.jpg')

.width(200)

.height(200)

在这个例子中，'images/view.jpg' 是本地图片在 ets 文件夹下的相对路径，就像在自己的宝藏库中明确指出要取出的宝藏位置。通过这种方式，我们可以快速地加载本地图片，无需依赖网络，加载速度极快，适用于一些静态的、不需要频繁更新的图片展示，比如应用的图标、默认的背景图片等。这种加载方式就像是从自家的仓库中直接取出物品，方便快捷，而且稳定可靠，不受网络环境的影响。

（二）网络资源加载：连接世界的视觉桥梁

加载网络图片时，我们只需将图片的网络链接作为参数传递给 Image 组件，就能将网络上的精美图片引入应用中展示。不过，就像进入一个需要通行证的神秘领域，我们必须先申请网络访问权限 ohos.permission.INTERNET。在 module.json5 文件中进行权限申请的配置如下：

{

"module": {

"name": "entry",

"type": "entry",

"description": "$string:module_desc",

"mainElement": "EntryAbility",

"deviceTypes": ["phone", "tablet", "2in1"],

"requestPermissions": [

{

"name": "ohos.permission.INTERNET",

"reason": "$string:reason",

"usedScene": {

"abilities": ["FormAbility"],

"when": "inuse"

}

]

}

申请权限后，加载网络图片的代码示例如下：

Image('https://example.com/图片链接.jpg')

.width(300)

.height(300)

这里的 https://example.com/图片链接.jpg 就像是一条通往网络图片世界的高速公路，通过这个链接，我们可以获取到来自世界各地的图片资源。这种加载方式让应用能够展示最新的、动态变化的图片内容，比如新闻应用中的实时图片报道、社交应用中的用户上传图片等。它就像是一座连接应用与世界的视觉桥梁，让用户能够随时看到最新的视觉信息。

（三）Resource 资源加载：跨包 / 跨模块的资源共享

使用 Resource 资源格式，就像是拥有了一把万能钥匙，可以跨包 / 跨模块引入图片。在 resources 文件夹下的图片都可以通过 $r 资源接口读取到并转换到 Resource 格式。例如：

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

.width(100)

.height(100)

同时，我们还可以将图片放在 rawfile 文件夹下，通过以下方式调用：

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

.width(150)

.height(150)

这种加载方式在大型项目中非常实用，它打破了包和模块的限制，实现了图片资源的共享和复用。就像一个资源共享平台，不同的模块都可以方便地获取到所需的图片资源，提高了开发效率，减少了资源的重复存储。

（四）媒体库资源加载：探索设备的图像宝库

媒体库资源加载支持 file:// 路径前缀的字符串，用于访问通过选择器提供的图片路径。通过调用接口，我们可以获取图库的照片 url，然后使用这些 url 加载图片。示例代码如下：

import { photoAccessHelper } from '@kit.MediaLibraryKit';

import { BusinessError } from '@kit.BasicServicesKit';

@Entry

@Component

struct Index {

@State imgDatas: string[] = [];

// 获取照片url集

getAllImg() {

try {

let PhotoSelectOptions: photoAccessHelper.PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();

PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;

PhotoSelectOptions.maxSelectNumber = 5;

let photoPicker: photoAccessHelper.PhotoViewPicker = new photoAccessHelper.PhotoViewPicker();

photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {

this.imgDatas = PhotoSelectResult.photoUris;

console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult));

}).catch((err: Error) => {

let message = (err as BusinessError).message;

let code = (err as BusinessError).code;

console.error(`PhotoViewPicker.select failed with. Code: ${code}, message: ${message}`);

});

} catch (err) {

let message = (err as BusinessError).message;

let code = (err as BusinessError).code;

console.error(`PhotoViewPicker failed with. Code: ${code}, message: ${message}`);

}

// aboutToAppear中调用上述函数，获取图库的所有图片url，存在imgDatas中

async aboutToAppear() {

this.getAllImg();

}

// 使用imgDatas的url加载图片

build() {

Column() {

Grid() {

ForEach(this.imgDatas, (item: string) => {

GridItem() {

Image(item).width(200)

}

}, (item: string): string => JSON.stringify(item))

}

}.width('100%').height('100%')

}

从媒体库获取的 url 格式通常如下：

Image('file://media/Photos/5')

.width(200)

.height(200)

这种加载方式为用户提供了极大的灵活性，他们可以直接从设备的媒体库中选择图片进行展示。比如在图片编辑应用中，用户可以方便地选取本地媒体库中的图片进行编辑；在相册应用中，能够直接展示媒体库中的所有图片，就像打开了设备的图像宝库，让用户可以自由探索和展示其中的精彩内容。

（五）base64 加载：数据存储的特殊方式

base64 格式的图片数据，其路径格式为 data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data]，其中 [base64 data] 为 Base64 字符串数据。在网页上，这种格式的字符串常用于存储图片的像素数据，在 ArkUI 中也可以使用这种方式加载图片。示例如下：

Image('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAABN0lEQVR42mP4P8IAAy0Mjf6xAYxHnIcHo6cZaOlZYj38VbESjIech5E9SayHYZ5FxnT1cL7uFwxMbt4lxtPYPElLjzNg8ywhMWp6GOZBeiVzDA/jinFySmZSkzUpHn5oLosXk+1hYj2NXliRUnjh8hy5MYzP0wzEeIzUvEyNGCY3WZMUw5Qm61EPjzQPkwIGjYfp4VlsnianIULIs3gbHvT2LLZWFzVLZ7xNS3p7lBqAGM+CPZy6o+w/DGfvrv5ffagTjtuOT/4/8cxcOF50Zc3/5dc3wvHeh0fh+PDjk/8vv74Bx/c+PPz/8utrOP7559fg8LD/uqT/A4GpHdB7Q/XBmFBAMyBLPv70DCWWTjw7h2L42pvbUCxGdlTPqRkoji7Y24DiqdCN6f8HKnCRMcNA5bmBCmgACwohlRAJ3H4AAAAASUVORK5CYII=')

.width(150)

.height(150)

这种加载方式适用于一些特殊场景，比如在需要将图片数据存储在数据库中，或者在网络传输中对图片数据进行编码时。它将图片数据编码成字符串，方便数据的存储和传输，就像将图片打包成一个特殊的包裹，便于在不同的环境中传递和使用。

四、属性设置优化显示效果

在使用 ArkUI 的 Image 组件展示图片时，通过合理设置各种属性，我们可以对图片的显示效果进行精细调整，使其更加符合应用的需求，为用户带来更加优质的视觉体验。下面，我们将详细介绍一些常用属性的设置方法及其对图片显示效果的影响。

（一）尺寸与比例调整

在控制图片尺寸和宽高比方面，width、height 和 aspectRatio 属性发挥着重要作用。width 和 height 属性分别用于设置图片的宽度和高度，其取值可以是具体的数值，也可以是百分比。例如：

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

.width(200)

.height(150)

上述代码将图片的宽度设置为 200 虚拟像素（vp），高度设置为 150 虚拟像素（vp），这样图片就会按照设定的尺寸进行显示。

而 aspectRatio 属性则用于设置图片的宽高比，即宽度与高度的比值。例如：

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

.width(300)

.aspectRatio(1.5)

在这个例子中，图片的宽度被设置为 300 虚拟像素（vp），通过 aspectRatio 属性设置宽高比为 1.5，系统会根据这个比例自动计算出图片的高度，从而保证图片在显示时保持特定的宽高比，避免图片出现拉伸或变形的情况。不同的尺寸和宽高比设置会产生截然不同的显示效果，开发者可以根据实际需求进行灵活调整，以达到最佳的视觉展示效果。

（二）占位图与加载提示

alt 属性在图片加载过程中扮演着重要角色，它主要用于设置占位图。当图片正在加载时，占位图会先行显示，为用户提供一个临时的视觉提示，避免出现空白区域，从而提升用户体验。

alt 属性仅支持本地图片（png、jpg、bmp、svg 和 gif 类型），不支持网络图片。我们可以通过以下方式使用 alt 属性设置占位图：

Image('https://example.com/图片链接.jpg')

.width(300)

.height(300)

.alt($r('app.media.placeholder'))

在这个例子中，当网络图片 https://example.com/图片链接.jpg 加载时，$r('app.media.placeholder') 所指向的本地占位图会先显示出来，让用户知道这里即将展示一张图片。当图片加载完成后，占位图会自动被替换为实际的图片。这种方式在网络图片加载时，尤其是在网络环境不稳定的情况下，能够有效减少用户等待时的焦虑感，为用户提供更好的交互体验。

（三）图片填充策略

objectFit 属性用于设置图片的填充效果，它有多个枚举值，包括 Contain、Cover、Fill 等，每个枚举值都会对图片的填充效果产生不同的影响。

Contain：图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白。这种模式下，图片会保持宽高比进行缩放，确保图片完全显示在组件内，不会出现图片部分被裁剪的情况，但可能会在组件周围出现空白区域。例如：

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

.width(200)

.height(100)

.objectFit(ImageFit.Contain)

Cover：默认效果，图片缩放到完全覆盖组件范围，可能导致图片显示不完整。在这种模式下，图片同样保持宽高比进行缩放，但会放大到足够大，使得图片能够完全覆盖组件区域，这可能会导致图片的部分内容被裁剪掉。代码示例如下：

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

.width(200)

.height(100)

.objectFit(ImageFit.Cover)

Fill：图片缩放至充满组件，这种模式下图片不会保持宽高比进行缩放，而是直接拉伸图片，使其充满整个组件区域，可能会导致图片变形。示例代码如下：

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

.width(200)

.height(100)

.objectFit(ImageFit.Fill)

通过对比这几种填充效果，可以清晰地看到它们之间的区别。开发者可以根据具体的应用场景和设计需求，选择合适的 objectFit 属性值，以实现理想的图片展示效果。

（四）插值与清晰度提升

interpolation 属性主要用于减轻低清晰度图片在放大显示时出现的锯齿问题，提升图片的清晰度。它的原理是通过算法对图片的像素进行重新计算和补充，从而使图片在放大后依然能够保持相对平滑和清晰的边缘。

我们可以通过以下方式使用 interpolation 属性：

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

.width(300)

.height(300)

.interpolation(ImageInterpolation.High)

在上述代码中，将 interpolation 属性的值设置为 ImageInterpolation.High，表示使用高等级的插值算法来处理图片，以获得更好的清晰度提升效果。需要注意的是，svg 类型图源和 PixelMap 资源不支持该属性，在使用时需要特别留意。

（五）图片裁剪与形状塑造

在 ArkUI 中，我们可以使用 clip 属性按指定的形状（圆形、椭圆形和矩形）对图片进行裁剪，从而实现独特的视觉效果。

裁剪为圆形：

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

.width(200)

.clip(new Circle({width:200,height:200}))

上述代码将图片裁剪成了一个直径为 200 虚拟像素（vp）的圆形，通过设置 Circle 组件的 width 和 height 属性来确定圆形的大小。

裁剪为椭圆形：

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

.width(300)

.height(200)

.clip(new Ellipse({width:300,height:200}))

这里将图片裁剪为一个宽度为 300 虚拟像素（vp），高度为 200 虚拟像素（vp）的椭圆形，通过 Ellipse 组件的 width 和 height 属性来定义椭圆形的尺寸。

裁剪为矩形：

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

.width(250)

.height(150)

.clip(new Rect({width:250,height:150}))

这段代码把图片裁剪成了一个宽度为 250 虚拟像素（vp），高度为 150 虚拟像素（vp）的矩形，利用 Rect 组件的 width 和 height 属性来设定矩形的大小。

通过这些代码示例，可以直观地看到图片被裁剪成不同形状后的效果，为应用界面增添独特的视觉魅力。

（六）透明度与填充颜色设置

opacity 属性用于控制图片的透明度，它的值介于 0（完全透明）和 1（完全不透明）之间。通过调整 opacity 属性的值，可以实现图片的半透明效果，为界面设计增添更多的创意和层次感。例如：

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

.width(200)

.height(200)

.opacity(0.5)

上述代码将图片的透明度设置为 0.5，使图片呈现出半透明的状态，这种效果在一些需要营造特殊氛围或进行图片叠加的场景中非常有用。

fillColor 属性则用于设置填充颜色，但需要注意的是，该属性仅对 svg 图源生效，设置后会替换 svg 图片的填充颜色。示例如下：

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

.width(100)

.height(100)

.fillColor(Color.Blue)

在这个例子中，$r('app.media.test_svg') 所指向的 svg 图片的填充颜色被设置为蓝色（Color.Blue），通过这种方式可以轻松改变 svg 图片的颜色，以适应不同的设计需求。

（七）遮罩文本的巧妙添加

overlay 属性为我们提供了在图片上叠加文本的功能，使图片与文本能够有机结合，传达更丰富的信息。

使用 overlay 属性时，我们不仅可以设置遮罩层的文本内容，还可以通过 align 和 offset 参数来调整文本的位置。align 参数用于指定文本在图片上的对齐方式，例如 Alignment.Bottom 表示将文本对齐到图片的底部；offset 参数则用于指定文本的偏移量，通过设置 x 和 y 的值来实现文本在水平和垂直方向上的精确位置调整。示例代码如下：

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

.width(300)

.height(200)

.overlay('美丽的风景',{ align: Alignment.Bottom, offset: { x:10, y: -20 } })

在上述代码中，“美丽的风景” 这段文本被叠加在图片上，并且根据 align 属性设置，文本被对齐到图片的底部，再通过 offset 属性的设置，使文本在水平方向向右偏移 10 虚拟像素（vp），在垂直方向向上偏移 20 虚拟像素（vp），从而实现了文本在图片上的精准定位，为用户提供更加直观和丰富的视觉信息。

五、网络图片加载进阶技巧

在加载网络图片时，权限申请是至关重要的一步，就像进入一个私人领地需要获得主人的许可一样。在鸿蒙应用开发中，申请网络访问权限 ohos.permission.INTERNET 是必不可少的，它确保了应用能够合法地从网络获取图片资源。具体来说，我们需要在 module.json5 文件中进行权限申请配置。这个文件就像是应用的 “身份档案”，记录着应用的各种信息和权限需求。在其中的 requestPermissions 字段中添加网络访问权限声明，详细说明申请权限的原因和使用场景，这样系统才能明白应用为什么需要访问网络，从而批准这个请求。如果忽略了这一步，应用就会像没有钥匙的访客，无法获取网络图片，导致图片显示区域一片空白，影响用户体验。

除了权限申请，了解 Image 组件加载网络图片时的缓存机制也非常重要。当 Image 组件首次加载网络图片时，它就像一个勤劳的探险家，会向网络发起资源请求。在这个过程中，它会从网络服务器上获取图片的原始数据，然后对这些数据进行一系列的处理，包括解码等操作，最终将图片展示在应用界面上。而当非首次加载相同的网络图片时，Image 组件就会变得 “聪明” 起来，它会默认从缓存中直接读取图片。这是因为在首次加载时，系统会将图片数据存储在缓存中，就像把珍贵的宝藏存放在一个方便取用的仓库里。当再次需要这张图片时，组件会首先去缓存这个 “仓库” 中寻找，如果找到了，就可以直接使用，无需再次向网络请求，大大提高了加载速度，节省了网络流量，也提升了用户体验。

不过，在实际应用中，图片缓存的情况可能会变得非常复杂，就像一个迷宫一样。比如，在一些图片社交应用中，用户可能会频繁地浏览大量不同尺寸、不同来源的图片，而且对图片的加载速度和内存占用有很高的要求。在这种复杂情况下，Image 组件默认的缓存接口就显得不够灵活了。这时，ImageKnife 就成为了处理复杂缓存情况的推荐选择。ImageKnife 就像是一把神奇的 “瑞士军刀”，它不仅提供了更灵活的缓存配置选项，让开发者可以根据应用的具体需求，如图片的使用频率、内存限制等，精确地控制缓存策略；还采用了先进的 LRU（Least Recently Used，最近最少使用）策略实现二级缓存，这种策略就像一个智能的仓库管理员，会优先淘汰那些最近最少使用的缓存图片，有效减少内存消耗，确保应用在加载大量图片时依然能够保持高效运行。此外，ImageKnife 还具备自定义图片变换、占位图设置等丰富的功能，为开发者在处理复杂图片加载和缓存场景时提供了全方位的支持。

六、实际案例与应用场景

在实际的鸿蒙应用开发中，ArkUI 的 Image 组件就像一个万能的视觉魔法师，被广泛应用于各种场景，为应用增添了丰富的视觉魅力。下面，我们通过几个具体的案例来深入了解 Image 组件的实际应用和它所带来的优势。

（一）登录界面的品牌展示

在许多应用的登录界面中，我们常常会看到企业的 Logo 或者精美的背景图，这些元素的呈现都离不开 Image 组件。以一个企业级应用的登录界面为例，我们可以通过以下代码添加企业 Logo：

Column() {

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

.width(100)

.height(100)

.margin({ bottom: 20 });

TextInput({ placeholder: '请输入用户名' });

TextInput({ placeholder: '请输入密码' })

.type(InputType.Password);

Button('登录')

.width(200);

}

在这段代码中，Image($r('app.media.company_logo')) 用于加载并显示企业的 Logo 图片，通过设置 .width(100) 和 .height(100) 确定了 Logo 的显示尺寸，使其在登录界面中以合适的大小展示。.margin({ bottom: 20 }) 则为 Logo 下方添加了 20 虚拟像素（vp）的边距，让整个布局看起来更加协调。

而如果我们想要为登录界面添加一个背景图，代码如下：

Column() {

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

.width('100%')

.height('100%')

.objectFit(ImageFit.Cover);

// 登录表单组件，如用户名输入框、密码输入框、登录按钮等

Column() {

TextInput({ placeholder: '请输入用户名' });

TextInput({ placeholder: '请输入密码' })

.type(InputType.Password);

Button('登录')

.width(200);

}

.position(Position.Absolute)

.left(50)

.top(150);

}

这里，Image($r('app.media.login_background')) 加载了登录背景图，通过 .width('100%') 和 .height('100%') 使背景图铺满整个屏幕，.objectFit(ImageFit.Cover) 确保背景图能够完全覆盖屏幕，即使图片的宽高比与屏幕不一致，也会保持图片的宽高比进行缩放，只是可能会导致图片部分被裁剪。而登录表单组件则通过 position(Position.Absolute) 设置为绝对定位，并使用 .left(50) 和 .top(150) 来精确控制其在背景图上的位置，使表单与背景图完美结合，营造出一个美观且具有品牌特色的登录界面。

在登录界面使用 Image 组件添加企业 Logo 或背景图，不仅能够提升界面的美观度，还能增强品牌的辨识度和用户对品牌的记忆度。用户在登录应用时，首先映入眼帘的就是这些品牌元素，能够让他们更加直观地感受到应用所属的企业形象，从而建立起对应用的信任和认同感。

（二）图片展示页面的精彩呈现

在图片展示类的应用中，如相册应用、图片分享社区等，Image 组件更是发挥了核心作用。以一个简单的图片展示页面为例，我们可以使用 Grid 布局和 ForEach 循环来实现多图展示的效果，代码如下：

@Entry

@Component

struct ImageGallery {

@State imageList: string[] = [

$r('app.media.image1'),

$r('app.media.image2'),

$r('app.media.image3'),

$r('app.media.image4')

];

build() {

Grid({ columns: 2, columnGap: 10, rowGap: 10 }) {

ForEach(this.imageList, (image) => {

GridItem() {

Image(image)

.width('100%')

.height(200)

.objectFit(ImageFit.Cover);

}

}, (image) => image);

}

.width('100%')

.height('100%');

}

在这个例子中，@State imageList 定义了一个图片资源数组，包含了四张本地图片的路径。通过 Grid 组件创建了一个网格布局，columns: 2 设置了网格的列数为 2，columnGap: 10 和 rowGap: 10 分别设置了列与列之间以及行与行之间的间距为 10 虚拟像素（vp）。ForEach 循环遍历 imageList 数组，为每一张图片创建一个 GridItem，并在其中使用 Image 组件来显示图片。通过 .width('100%') 和 .height(200) 设置图片的宽度充满网格项，高度为 200 虚拟像素（vp），.objectFit(ImageFit.Cover) 保证图片能够以合适的比例填充网格项，即使图片的宽高比与网格项不一致，也能完整地展示图片的关键内容。

除了多图展示，我们还可以为图片添加一些特效，比如点击图片时实现图片的放大效果。我们可以结合 @Click 装饰器和 @State 变量来实现这一效果，代码如下：

@Entry

@Component

struct ImageZoom {

@State isZoomed: boolean = false;

@State imageSource: string = $r('app.media.image1');

handleClick() {

this.isZoomed =!this.isZoomed;

}

build() {

Column() {

Image(this.imageSource)

.width(this.isZoomed? 400 : 200)

.height(this.isZoomed? 400 : 200)

.objectFit(ImageFit.Cover)

.@Click(this.handleClick);

}

.width('100%')

.height('100%');

}

在这段代码中，@State isZoomed 用于记录图片是否处于放大状态，初始值为 false。@State imageSource 指定了要显示的图片路径。handleClick 方法在图片被点击时被调用，通过取反 isZoomed 的值来切换图片的放大和缩小状态。在 Image 组件中，通过 .width(this.isZoomed? 400 : 200) 和 .height(this.isZoomed? 400 : 200) 根据 isZoomed 的值来动态设置图片的宽度和高度，实现图片的放大和缩小效果，为用户带来更加丰富和有趣的交互体验。

在图片展示页面使用 Image 组件，能够方便地实现多图展示和各种图片特效，满足用户对图片浏览和交互的需求。用户可以在这样的页面中轻松浏览大量图片，并且通过各种特效增加了图片展示的趣味性和吸引力，提升了用户在图片展示类应用中的使用体验。

七、总结与展望

通过对 ArkUI 中 Image 组件的深入探索，我们全面掌握了它在图片显示方面的核心知识点。从基础的创建操作，到多样数据源的加载方式，再到各种属性的精细设置，以及网络图片加载的进阶技巧和实际应用场景的展示，Image 组件展现出了强大的功能和丰富的灵活性。

在实际开发中，希望大家能够充分利用这些知识，深入探索和应用 Image 组件。无论是打造精美的登录界面，还是构建功能丰富的图片展示页面，都可以通过合理运用 Image 组件及其属性，为应用增添独特的视觉魅力，提升用户体验。

展望未来，随着技术的不断发展，我们有理由期待 ArkUI 在图片显示方面会有更加出色的表现。也许在不久的将来，Image 组件会支持更多的图片格式，为开发者提供更广泛的图片资源选择；其加载速度可能会进一步提升，即使在复杂的网络环境下，也能快速、稳定地展示图片，让用户无需等待；在图片处理能力上，可能会增加更多高级特性，如智能图片裁剪、自动图片优化等，帮助开发者更轻松地实现各种复杂的图片展示效果。同时，随着鸿蒙生态的不断壮大，ArkUI 也将与其他技术和框架深度融合，为开发者带来更多创新的解决方案，推动鸿蒙应用开发迈向新的高度。让我们一起期待 ArkUI 的未来，共同见证它在图片显示领域的更多精彩！