【鸿蒙实战开发】ArkUI-image图片组件开发指南

最新推荐文章于 2025-06-27 22:29:49 发布

原创

最新推荐文章于 2025-06-27 22:29:49 发布 · 790 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙 #ArkUI #前端 #安卓

image是图片组件，用来渲染展示图片。具体用法请参考image API。

创建image组件

在pages/index目录下的hml文件中创建一个image组件。

<!-- index.hml -->
<div class="container">
  <image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
</div>

/* xxx.css */
.container {
  width: 100%;
  height: 100%; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}

设置image样式

通过设置width、height和object-fit属性定义图片的宽、高和缩放样式。

<!-- index.hml -->
<div class="container">
  <image src="common/images/bg-tv.jpg"> </image>
</div>

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color:#F1F3F5;
}
image{
  width: 80%;  
  height: 500px;
  border: 5px solid saddlebrown;
  border-radius: 20px;
  object-fit: contain;
  match-text-direction:true;
}