对比文字来说，唯美的图片更能激起用户的兴趣。在ArkUI中，我们可以像使用Text文本视图一样，使用官方提供的Image图片视图快速显示一张本地图片，或者网络图片。

使用Image视图显示本地图片

首先我们先准备一张图片，并将其拖入到项目中的resources/base/media文件夹中，如下图所示：

文件夹路径可能有点深，如果后面Harmony OS能提供一个类似统一的Asset资源库文件，用于管理所有项目中的素材，那就好了。

导入图片后，我们就可以使用Image图片视图来显示它，如下代码所示：

@Entry
@Component

struct ImageView {
  build() {
    Column() {
      Image($r("app.media.upgrade_logo"))
    }
  }
}

和Text文本视图不同的是，Image图片视图无法单独作为一个单独的视图存在，因此我们还需要添加一个父级别容器进行包裹。

我们使用了Column垂直布局容器作为父级别容器，在其闭包中，使用Image文本视图来显示图片的内容，其中$r 函数是 ArkUI 中内置的函数，用于解析资源路径。它接受一个字符串作为输入，表示资源路径，并返回资源在应用程序资源包中的实际位置。

我们的资源路径使用点语法进行递进查询，首先根节点是app，其次是media文件夹，最后是图片名称upgrade_logo，这里注意的是不需要带上图片的后缀。

Image视图的常用修饰器

由于图片素材本身的尺寸问题，会发现在预览窗口中图片超出了显示范围，我们依然可以使用ArkUI中Image视图的相关修饰符来调整图片样式。

使用objectFit修饰符可以设置图片的缩放类型，如下代码所示：

Image($r("app.media.upgrade_logo"))
  .objectFit(ImageFit.ScaleDown)

图片缩放后，可以设置ImageFit的参数来实现不同图片的显示效果，比如Contain（保持宽高比、放大至屏幕边缘）、Cover（保持宽高比，放大铺满屏幕）、Auto（自适应显示）、Fill（填充整个屏幕）、ScaleDown（保持宽高比、保持原始尺寸）、None（无）。

设置缩放方式后，我们便可以只设置宽度或者高度，来调整图片最终的显示尺寸。如下代码所示：

Image($r("app.media.upgrade_logo"))
  .objectFit(ImageFit.ScaleDown)
  .width(100)

Image图片视图默认位置为预览窗口左上角，如果我们希望图片位于页面正中间，可以通过布局容器来设置Image图片视图的在页面中的位置，如下代码所示：

Row() {
  Column() {
    // 图片视图
  }
  .width('100%')
}
.height('100%')

上述代码中，我们使用Row横向布局容器和Column垂直布局容器相结合，设置父级容器的宽度和高度占据整个可用空间，以此来实现Image图片视图在页面的居中显示。

最后，我们再为图片设置个圆角，让图标更加圆润好看些，如下代码所示：

.borderRadius(8)

使用Image视图显示网络图片

除了显示本地图片素材外，Image视图也支持通过URL的形式显示网络照片，如此便不用将所有素材都放置在项目本地。

首先我们需要配置网络访问权限，在entry/src/main文件夹下，找到module.json5文件，打开并在其代码中增加访问网络权限代码，如下代码所示：

"requestPermissions":[
  {
    "name": "ohos.permission.INTERNET"
  }
]

在增加上述代码时，不要忘了增加“,”逗号和其他代码分开。

完成之后，我们就可以在网上复制一个图片的URL，将URL地址作为参数传入到Image视图来显示网络图片了。如下代码所示：

// 声明地址参数
@State imageUrl: string = 'https://ouch-cdn2.icons8.com/HTSk2Mrt3-kEcGHnhQxPrpoW06CEzwtcjPsCphrAtZ4/rs:fit:368:394/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvNTMx/L2E4MGUxNGJlLTNm/Y2EtNDYzZi1hMWVi/LTU0MzhmMzFkNjg2/OC5zdmc.png'

// 显示网络图片
Image(this.imageUrl)
  .objectFit(ImageFit.Auto)

本章小结

本地图片、网络图片，ArkUI对于Image视图的基础能力的完成度还是很高的，使用起来也非常方便。

但我也注意到了官方其实提供了官方的icon图标库供开发者使用，以此来构建统一精美的UI样式，但有点可惜的是，官方icon库并没有能够直接被Image视图所调用，希望之后能够支持吧。