HarmonyOS-UIAbitity-Image——【坚果派-红目香薰】

​

摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 

目录

摘要

HarmonyOS-UIAbitity-Image

示例代码

设置缩放类型

ImageFit包含以下几种类型：

加载网络图片

HarmonyOS-UIAbitity-Image

Image组件用来渲染展示图片，它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高，图片就能加载出来。

我们的测试图片：

​ 2.png 编辑

保存位置：

​

编辑

存储路径：src/main/resources/base/media/2.png

示例代码

@Entry@Component

struct Index {

@State info: string = '美丽的女孩'

build() {

Row() {

Column() {

Image($r("app.media.2"))

.objectFit(ImageFit.Cover)

.width('80%')

.height('80%')

Text(this.info)

.textAlign(TextAlign.Center)

.fontSize(50)

}.width('100%')

.borderStyle(BorderStyle.Solid)

.borderWidth(2)

.borderColor('#C75450')

}

.width('100%')

.height('100%')

}

}

​编辑

设置缩放类型

为了使图片在页面中有更好的显示效果，有时候需要对图片进行缩放处理。您可以使用objectFit属性设置图片的缩放类型，objectFit的参数类型为ImageFit。

将图片加载到Image组件，设置宽高各100，设置objectFit为Cover（默认值），设置图片背景色为灰色0xCCCCCC。示例代码如下：

Image($r("app.media.2"))
  .objectFit(ImageFit.Cover)
  .backgroundColor(0xCCCCCC)
  .width('100%')
  .height('100%') 

ImageFit包含以下几种类型：

Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
Auto：自适应显示。
Fill：不保持宽高比进行放大缩小，使得图片充满显示边界。
ScaleDown：保持宽高比显示，图片缩小或者保持不变。
None：保持原有尺寸显示。

加载网络图片

图片地址：https://img-blog.csdnimg.cn/direct/e81d304548d842c3862c5e1907dfc185.png

比如浏览新闻的时候，图片一般从网络加载而来，Image组件支持加载网络图片，将图片地址换成网络图片地址进行加载。

为了成功加载网络图片，您需要在module.json5文件中申明网络访问权限。

​编辑

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

看好位置，直接复制过去就行。

​

可以看到，图片加载成功。

注：应用访问网络需要申请ohos.permission.INTERNET权限，因为HarmonyOS提供了一种访问控制机制即应用权限，用来保证这些数据或功能不会被不当或恶意使用。

​