1# image 2 3The **\<image>** component is used to render and display images. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17| Name| Type| Mandatory| Description| 18| -------- | -------- | -------- | -------- | 19| src | string | No| <br>Image path. The supported image formats include PNG and JPG.<br>**NOTE**<br>Some lightweight devices are not able to parse images in their original format. To address this issue, in the application compilation phase, the image is directly compiled into a parseable bitmap (total number of bytes: image length x width x 4) and packed in the application installation package. Naturally, larger images result in a larger application installation package. To maintain a proper size of the application installation package, reduce the image resolution as appropriate.| 20| id | string | No| Unique ID of the component.| 21| style | string | No| Style declaration of the component.| 22| class | string | No| Style class of the component, which is used to refer to a style table.| 23| ref | string | No| Reference information of child elements, which is registered with the parent component on **$refs**.| 24 25 26## Events 27 28| Name| Parameter| Description| 29| -------- | -------- | -------- | 30| click | - | Triggered when the component is clicked.| 31| longpress | - | Triggered when the component is long pressed.| 32| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.| 33 34 35## Styles 36 37| Name| Type| Default Value| Mandatory| Description| 38| -------- | -------- | -------- | -------- | -------- | 39| width | <length> \| <percentage><sup>5+</sup> | - | No| Component width.<br><br>If this attribute is not set, the default value **0** is used.| 40| height | <length> \| <percentage><sup>5+</sup> | - | No| Component height.<br><br>If this attribute is not set, the default value **0** is used.| 41| padding | <length> | 0 | No| Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 42| padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| 43| margin | <length> \| <percentage><sup>5+</sup> | 0 | No| Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 44| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| 45| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| 46| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| 47| border-radius | <length> | - | No| Radius of round-corner borders.| 48| background-color | <color> | - | No| Background color.| 49| opacity | number | 1 | No| Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.| 50| display | string | flex | No| How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 51| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No| left\|Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| 52 53## Example 54 55```html 56<!-- xxx.hml --> 57<div class="container"> 58 <image src="common/images/hw_right.png" style="width: 300px; height: 300px; border-color: red; border-width: 2px;"> 59 </image> 60</div> 61``` 62 63```css 64/* xxx.css */ 65.container { 66 justify-content: center; 67 align-items: center; 68 flex-direction: column; 69 width: 100%; 70 height: 100%; 71} 72``` 73 74 75
