1# image 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6图片组件，用来渲染展示图片。 7 8 9## 子组件 10 11不支持。 12 13 14## 属性 15 16除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 17 18| 名称 | 类型 | 默认值 | 必填 | 描述 | 19| ---- | ------ | ---- | ---- | ---------------------------------------- | 20| src | string | - | 否 | 图片的路径，支持本地路径，图片格式包括png、jpg、bmp、svg和gif。<br/>- 支持Base64字符串<sup>6+</sup>。格式为data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], 其中[base64 data]为Base64字符串数据。<br/>- 支持dataability://的路径前缀，用于访问通过data ability提供的图片路径<sup>6+</sup>。 | 21| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 | 22 23 24## 样式 25 26除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下属性： 27 28| 名称 | 类型 | 默认值 | 必填 | 描述 | 29| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- | 30| object-fit | string | cover | 否 | 设置图片的缩放类型，不支持svg格式。可选值类型说明请见object-fit类型说明。 | 31| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，不支持svg格式。 | 32| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸，该属性为true时object-fit属性不生效，svg类型图源不支持该属性。 | 33| object-position<sup>7+</sup> | string | 0px 0px | 否 | 设置图片在组件内展示的位置。<br/>设置类型有两种：<br/>1. 像素，单位px，示例 15px 15px 代表X轴或者Y轴移动的位置<br/>2. 字符，可选值：<br/>- left 图片显示在组件左侧；<br/>- top 图片显示在组件顶部位置；<br/>- right 图片显示在组件右侧位置；<br/>- bottom 图片显示在组件底部位置。 | 34 35**表1** object-fit 类型说明 36 37| 类型 | 描述 | 38| ---------- | ------------------------------------ | 39| cover | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界，居中显示。 | 40| contain | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内，居中显示。 | 41| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | 42| none | 保持原有尺寸进行居中显示。 | 43| scale-down | 保持宽高比居中显示，图片缩小或者保持不变。 | 44 45> **说明：** 46> 使用svg图片资源时： 47> 48> - 建议设置image组件的长宽，否则在父组件的长或宽为无穷大的场景下，svg资源将不会绘制； 49> 50> - 如果svg描述中未指定相应的长宽，则svg将会填满image组件区域； 51> 52> - 如果svg描述中指定了相应的长宽，和image组件本身的长宽效果如下： 53> 54> 1. 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分； 55> 56> 2. 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 57> 58> - 图片设置svg图源时，支持的标签范围有限，目前支持的svg标签包括svg、rect、circle、ellipse、path、line、polyline、polygon、animate、animateMotion、animateTransform。 59 60 61## 事件 62 63除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件： 64 65| 名称 | 参数 | 描述 | 66| -------- | ---------------------------------------- | ------------------------- | 67| complete | {<br> width：width，<br> height：height<br> } | 图片成功加载时触发该回调，返回成功加载的图源尺寸。 | 68| error | {<br> width：width，<br> height：height<br> } | 图片加载出现异常时触发该回调，异常时长宽为零。 | 69 70## 方法 71 72支持[通用方法](../arkui-js/js-components-common-methods.md)。 73 74 75## 示例 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 116 117
