harmony 鸿蒙Adding an Image

  • 2022-08-09
  • 浏览 (702)

Adding an Image

Generally, the <image> component is used to add images on a page. The method of using this component is similar to that of using the <text> component.

To reference images via the <image> component, you are advised to store the image files under js\default\common. (You need to create the common directory on your own.) For details about the directory structure, see Directory Structure. The following sample code shows you how to add an image and set its style.

<!-- xxx.hml -->
<image class="img" src="{{middleImage}}"></image>
/* xxx.css */
.img {  
  margin-top: 30px;
  margin-bottom: 30px;
  height: 385px;
}
// xxx.js
export default {
  data: {
    middleImage: '/common/ice.png',
  },
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙UI Development

harmony 鸿蒙Animation Smoothing

harmony 鸿蒙Animation Overview

harmony 鸿蒙Property Animation APIs

harmony 鸿蒙Property Animation Overview

harmony 鸿蒙Blur Effect

harmony 鸿蒙Color Effect

harmony 鸿蒙Button

harmony 鸿蒙Custom Dialog Box (CustomDialog)

harmony 鸿蒙Progress Indicator (Progress)

0  赞