1# ImageSpan 2 3**\<ImageSpan>** is a child component of the [\<Text>](ts-basic-components-text.md) component and is used to display inline images. 4 5> **NOTE** 6> 7> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17ImageSpan(value: ResourceStr | PixelMap) 18 19**Parameters** 20 21| Name| Type| Mandatory| Description| 22| -------- | -------- | -------- | -------- | 23| value | [ResourceStr](ts-types.md#ResourceStr) \| [PixelMap](../apis/js-apis-image.md#pixelmap7) | Yes| Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, **ImageSpan("common/test.jpg")**, the **\<ImageSpan>** component cannot be called across bundles or modules. Therefore, you are advised to use **\$r** to reference image resources that need to be used globally.<br>\- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.<br>\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the application has the read permission to the files in the specified path.| 24 25 26## Attributes 27 28The [universal attribute](ts-universal-attributes-size.md) methods can be used to set the size, background, and border. 29 30| Name| Type| Description| 31| -------- | -------- | -------- | 32| verticalAlign | [ImageSpanAlignment](#imagespanalignment) | Alignment mode of the image with the text.<br>Default value: **ImageSpanAlignment.BOTTOM**| 33| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale type.<br>Default value: **ImageFit.Cover**| 34 35## ImageSpanAlignment 36 37| Name | Description | 38| -------- | ------------------------------ | 39| TOP | The image is top aligned with the text. | 40| CENTER | The image is centered aligned with the text. | 41| BOTTOM | The image is bottom aligned with the text. | 42| BASELINE | The image is bottom aligned with the text baseline.| 43 44## Events 45 46Among all the universal events, only the [click event](ts-universal-attributes-click.md) is supported. 47 48## Example 49 50```ts 51// xxx.ets 52@Entry 53@Component 54struct SpanExample { 55 build() { 56 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start}) { 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 Text() { 62 ImageSpan($r('app.media.icon')) 63 .width('200px') 64 .height('200px') 65 .objectFit(ImageFit.Fill) 66 .verticalAlign(ImageSpanAlignment.CENTER) 67 Span('I am LineThrough-span') 68 .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(25) 69 ImageSpan($r('app.media.icon')) 70 .width('50px') 71 .height('50px') 72 .verticalAlign(ImageSpanAlignment.TOP) 73 Span('I am Underline-span') 74 .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25) 75 ImageSpan($r('app.media.icon')) 76 .size({width:'100px', height:'100px'}) 77 .verticalAlign(ImageSpanAlignment.BASELINE) 78 Span('I am Underline-span') 79 .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25) 80 ImageSpan($r('app.media.icon')) 81 .width('70px') 82 .height('70px') 83 .verticalAlign(ImageSpanAlignment.BOTTOM) 84 Span('I am Underline-span') 85 .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(50) 86 } 87 .width('100%') 88 .textIndent(50) 89 }.width('100%').height('100%').padding({ left: 0, right: 0, top: 0 }) 90 } 91} 92``` 93 94 95
