1# ImageSpan 2 3[Text](ts-basic-components-text.md)组件的子组件，用于显示行内图片。 4 5> **说明：** 6> 7> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17ImageSpan(value: ResourceStr | PixelMap) 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| -------- | -------- | -------- | -------- | 23| value | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 是 | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`ImageSpan("common/test.jpg")`，不支持跨包/跨模块调用该ImageSpan组件，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持file:///data/storage路径前缀的字符串，用于读取本应用安装目录下files文件夹下的图片资源。需要保证目录包路径下的文件有可读权限。 | 24 25 26## 属性 27 28[通用属性](ts-universal-attributes-size.md)方法支持尺寸设置、背景设置、边框设置。 29 30| 名称 | 参数类型 | 描述 | 31| -------- | -------- | -------- | 32| verticalAlign | [ImageSpanAlignment](#imagespanalignment) | 图片基于文本的对齐方式。<br />默认值：ImageSpanAlignment.BOTTOM | 33| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | 设置图片的缩放类型。<br/>默认值：ImageFit.Cover | 34 35## ImageSpanAlignment 36 37| 名称 | 描述 | 38| -------- | ------------------------------ | 39| TOP | 图片上边沿与文本上边沿对齐。 | 40| CENTER | 图片中间与文本中间对齐。 | 41| BOTTOM | 图片下边沿与文本下边沿对齐。 | 42| BASELINE | 图片下边沿与文本BaseLine对齐。 | 43 44## 事件 45 46通用事件仅支持[点击事件](ts-universal-attributes-click.md)。 47 48## 示例 49 50```ts 51// xxx.ets 52@Entry 53@Component 54struct SpanExample { 55 build() { 56 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 57 Text() { 58 Span('This is the Span and ImageSpan component').fontSize(25).textCase(TextCase.Normal) 59 .decoration({ type: TextDecorationType.None, color: Color.Pink }) 60 }.width('100%').textAlign(TextAlign.Center) 61 62 Text() { 63 ImageSpan($r('app.media.icon')) 64 .width('200px') 65 .height('200px') 66 .objectFit(ImageFit.Fill) 67 .verticalAlign(ImageSpanAlignment.CENTER) 68 Span('I am LineThrough-span') 69 .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(25) 70 ImageSpan($r('app.media.icon')) 71 .width('50px') 72 .height('50px') 73 .verticalAlign(ImageSpanAlignment.TOP) 74 Span('I am Underline-span') 75 .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25) 76 ImageSpan($r('app.media.icon')) 77 .size({ width: '100px', height: '100px' }) 78 .verticalAlign(ImageSpanAlignment.BASELINE) 79 Span('I am Underline-span') 80 .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25) 81 ImageSpan($r('app.media.icon')) 82 .width('70px') 83 .height('70px') 84 .verticalAlign(ImageSpanAlignment.BOTTOM) 85 Span('I am Underline-span') 86 .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(50) 87 } 88 .width('100%') 89 .textIndent(50) 90 }.width('100%').height('100%').padding({ left: 0, right: 0, top: 0 }) 91 } 92} 93``` 94 95 96 97
