阅读(2181) (8)

鸿蒙OS 添加图片区域

2020-09-16 17:48:57 更新

实现图片区域通常用 image 组件来实现,使用的方法和 text 组件类似。图片资源放在 common 目录下,图片的路径要与图片实际所在的目录一致。具体示例如下:

<!-- xxx.hml -->
<!-- 插入图片 -->
<div class="right-container">
  <image class="img" src="{{middleImage}}"></image>
</div>

/* xxx.css */
.right-container {  
  width: 432px;
  justify-content: center;
}
.img {  
  margin-top: 10px;
  object-fit: contain;
  height: 450px;
}

// xxx.js
export default {
  data: {
    middleImage: '/common/ice.png',
  },
}