1# image 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **\<image>** component is used to render and display images. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported. 18 19| Name | Type | Default Value | Mandatory | Description | 20| ---- | ------ | ---- | ---- | ---------------------------------------- | 21| src | string | - | No | Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.<br>- The Base64 string<sup>6+</sup> is supported in the following format: data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], where **[base64 data]** is a Base64 string.<br>- The path prefix of **dataability://** is supported, which allows access to the image path provided by the Data ability.<sup>6+</sup>| 22| alt | string | - | No | Alternative information for the image, which is displayed during image loading. | 23 24 25## Styles 26 27In addition to the [universal styles](js-components-common-styles.md), the following styles are supported. 28 29| Name | Type | Default Value | Mandatory | Description | 30| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- | 31| object-fit | string | cover | No | Image scale type. This style is not supported for SVG images. For details about available values, see **object-fit**.| 32| match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. This style is not supported for SVG images. | 33| fit-original-size | boolean | false | No | Whether the **\<image>** component adapts to the image source size when its width and height are not set. If this style is set to **true**, **object-fit** will not take effect. This style is not supported for SVG images.| 34| object-position<sup>7+</sup> | string | 0px 0px | No | Position of the image in the component.<br>The options are as follows:<br>1. Pixels, in px. For example, **15px 15px** indicates the position to move along the x-axis or y-axis.<br>2. Characters. Optional values are as follows:<br>- **left**: The image is displayed on the left of the component.<<br>- **top**: The image is displayed on the top of the component.<br>- **right**: The image is displayed on the right of the component.<br>- **bottom**: The image is displayed at the bottom of the component.| 35 36**Table 1** object-fit 37 38| Type | Description | 39| ---------- | ------------------------------------ | 40| cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.| 41| contain | The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle. | 42| fill | The image is scaled to fill the display area, and its aspect ratio is not retained. | 43| none | The image is displayed in the middle with its aspect ratio and size retained. | 44| scale-down | The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size. | 45 46> **NOTE** 47> 48> When using an SVG image, note that: 49> 50> - The SVG image will not be drawn if the length or width of the **\<image>** component is infinity. 51> 52> - If the image length and width are not specified in the SVG description, the SVG image fills the **\<image>** component area. 53> 54> - If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect: 55> 56> 1. If the **\<image>** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component. 57> 58> 2. If the **\<image>** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component. 59> 60> - For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, **animate**, **animateMotion**, and **animateTransform**. 61 62 63## Events 64 65In addition to the [universal events](js-components-common-events.md), the following events are supported. 66 67| Name | Parameter | Description | 68| -------- | ---------------------------------------- | ------------------------- | 69| complete | {<br> width: width,<br> height: height<br> } | Triggered when an image is successfully loaded. The loaded image size is returned.| 70| error | {<br> width: width,<br> height: height<br> } | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. | 71 72## Methods 73 74The [universal methods](js-components-common-methods.md) are supported. 75 76 77## Example 78 79```html 80<!-- xxx.hml --> 81<div class="container"> 82 <image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;"> 83 </image> 84 <select class="selects" onchange="change_fit"><option for="{{fits}}" value="{{$item}}">{{$item}}</option></select> 85</div> 86``` 87 88```css 89/* xxx.css */ 90.container { 91 justify-content: center; 92 align-items: center; 93 flex-direction: column; 94} 95.selects{ 96 margin-top: 20px; 97 width:300px; 98 border:1px solid #808080; 99 border-radius: 10px; 100} 101``` 102 103```js 104// xxx.js 105export default { 106 data: { 107 fit:"cover", 108 fits: ["cover", "contain", "fill", "none", "scale-down"], 109 }, 110 change_fit(e) { 111 this.fit = e.newValue; 112 }, 113} 114``` 115 116 117
