1# image 2 3 4图片组件，用来渲染展示图片。 5 6> **说明：** 7> 8> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10## 子组件 11 12不支持。 13 14 15## 属性 16 17除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性： 18 19| 名称 | 类型 | 默认值 | 必填 | 描述 | 20| -------- | -------- | -------- | -------- | -------- | 21| src | string | - | 否 | 图片的路径。<br/>- 支持本地路径，图片格式包括png, jpg, bmp, svg和gif。<br/>- 支持内存图片读取，scheme格式为memory://。 | 22| alt | string | - | 否 | 占位图，当指定图片在加载中时显示。 | 23 24 25## 样式 26 27除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式： 28 29| 名称 | 类型 | 默认值 | 必填 | 描述 | 30| -------- | -------- | -------- | -------- | -------- | 31| object-fit | string | cover | 否 | 设置图片的缩放类型，可选值类型说明请见object-fit 类型说明，svg格式不支持。 | 32| match-text-direction | boolean | false | 否 | 图片是否跟随文字方向，svg格式不支持。 | 33| fit-original-size | boolean | false | 否 | image组件在未设置宽高的情况下是否适应图源尺寸，该属性为true时object-fit属性不生效，svg类型图源不支持该属性。 | 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> - 如果image组件本身的长宽小于svg中的长宽，svg会被裁切，仅显示左上角部分。 55> 56> - 如果image组件本身的长宽大于svg中的长宽，svg会被放置在image组件的左上角，image组件其他部分显示空白。 57 58 59## 事件 60 61| 名称 | 参数 | 描述 | 62| -------- | -------- | -------- | 63| click | - | 点击动作触发该事件。 | 64| complete | - | 图片成功加载时触发该回调。 | 65| error | - | 图片加载出现异常时触发该回调。 | 66 67 68## 示例 69 70 71```html 72<!-- xxx.hml --> 73<stack class="content"> 74 <image src="/common/bg3.jpg" class="img"></image> 75</stack> 76``` 77 78 79```css 80/* xxx.css */ 81.img{ 82 object-fit: contain 83} 84``` 85**4*4卡片** 86 87 88 89
