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](../arkui-js/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](../arkui-js/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 an image in the component.<br>The options are as follows:<br>1. Pixels. For example, **15px 15px** indicates the moving position 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 61## Events 62 63In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported. 64 65| Name | Parameter | Description | 66| -------------- | ---------------------------------------- | ------------------------- | 67| complete(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an image is successfully loaded. The loaded image size is returned.| 68| error(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. | 69 70## Methods 71 72The [universal methods](../arkui-js/js-components-common-methods.md) are supported. 73 74 75## Example 76 77```html 78<!-- xxx.hml --> 79<div class="container"> 80 <image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;"> 81 </image> 82 <select class="selects" onchange="change_fit"><option for="{{fits}}" value="{{$item}}">{{$item}}</option></select> 83</div> 84``` 85 86```css 87/* xxx.css */ 88.container { 89 justify-content: center; 90 align-items: center; 91 flex-direction: column; 92} 93.selects{ 94 margin-top: 20px; 95 width:300px; 96 border:1px solid #808080; 97 border-radius: 10px; 98} 99``` 100 101```js 102// xxx.js 103export default { 104 data: { 105 fit:"cover", 106 fits: ["cover", "contain", "fill", "none", "scale-down"], 107 }, 108 change_fit(e) { 109 this.fit = e.newValue; 110 }, 111} 112``` 113 114 115
