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

目录

一、ArkUI 与 Image 组件初相识

二、加载图片资源的多种姿势

2.1 本地资源

2.2 网络资源

2.3 Resource 资源

2.4 媒体库资源

2.5 base64

三、常用属性实现灵活显示

3.1 渲染模式大变身

3.2 插值让图片告别模糊

3.3 缩放类型随心选

四、综合案例展示

五、总结与展望

---

一、ArkUI 与 Image 组件初相识

在当今的移动应用开发领域，ArkUI 作为一款备受瞩目的 UI 框架，正逐渐崭露头角，为开发者们带来了全新的开发体验。它为应用的 UI 开发提供了完整的基础设施，涵盖了简洁的 UI 语法、丰富的 UI 功能，像组件、布局、动画以及交互事件等，还配备了实时界面预览工具，助力开发者轻松进行可视化界面开发。

而在 ArkUI 众多实用的组件中，Image 组件无疑是极为重要的一员。它主要用于在应用中展示各种图片，支持诸如 png、jpg、bmp、svg、gif 和 heif 等多种常见的图片格式 ，无论是按钮中的 icon 图标，还是网络图片、本地图片，都能完美加载显示。在实际应用场景里，从电商类应用展示商品图片，到社交类应用呈现用户头像和分享的图片，再到资讯类应用配图等，Image 组件的身影无处不在，它极大地丰富了应用的视觉效果，提升了用户体验。然而，仅仅简单地使用 Image 组件展示图片，可能并不能完全满足多样化的设计需求。这就需要我们深入了解如何通过设置其属性，来让图片显示更加灵活，实现各种自定义的效果 ，接下来就让我们一探究竟。

二、加载图片资源的多种姿势

在使用 Image 组件时，首先要考虑的就是如何加载图片资源 ，它支持加载存档图和多媒体像素图两种类型 。其中，存档图类型的数据源又可以分为本地资源、网络资源、Resource 资源、媒体库资源和 base64。

2.1 本地资源

如果你的图片存放在本地，只需创建文件夹，将本地图片放入 ets 文件夹下的任意位置，然后在 Image 组件中引入本地图片路径，就能轻松显示图片（根目录为 ets 文件夹） 。例如：

@Entry

@Component

struct Index {

build() {

Row() {

Column({space:20}) {

Image('/Images/可爱小猫.png').width(100).height(100)

Image('/Images/帅气小狗.png').width(100).height(100)

}.width('100%')

}.height('100%')

}

}

2.2 网络资源

要是想引入网络图片，别忘记先申请权限 ohos.permission.INTERNET ，具体申请方式可参考权限申请声明 。完成权限申请后，Image 组件的 src 参数设置为网络图片的链接即可 。示例代码如下：

@Entry

@Component

struct Index {

build() {

Row() {

Column({space:20}) {

Image('https://img1.baidu.com/it/u=3954245725,1121943782&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400').width(100).height(100)

Image('https://img2.baidu.com/it/u=123456,789012&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=600').width(100).height(100)

}.width('100%')

}.height('100%')

}

}

2.3 Resource 资源

使用资源格式能实现跨包 / 跨模块引入图片，resources 文件夹下的图片都可以通过 $r 资源接口读取到并转换到 Resource 格式 。比如：

@Entry

@Component

struct Index {

build() {

Row() {

Column({space:20}) {

Image($r('app.media.图标1')).width(100).height(100)

Image($r('app.media.图标2')).width(100).height(100)

}.width('100%')

}.height('100%')<