ImageSpan

<ImageSpan> is a child component of the <Text> component and is used to display inline images.

NOTE

This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

ImageSpan(value: ResourceStr | PixelMap)

Parameters

Name Type Mandatory Description
value ResourceStr | PixelMap Yes Image source. Both local and online images are supported.
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.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
- Base64 strings are supported. The value format is data:image/[png|jpeg|bmp|webp];base64,[base64 data], where [base64 data] is a Base64 string.
- 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.

Attributes

The universal attribute methods can be used to set the size, background, and border.

Name Type Description
verticalAlign ImageSpanAlignment Alignment mode of the image with the text.
Default value: ImageSpanAlignment.BOTTOM
objectFit ImageFit Image scale type.
Default value: ImageFit.Cover

ImageSpanAlignment

Name Description
TOP The image is top aligned with the text.
CENTER The image is centered aligned with the text.
BOTTOM The image is bottom aligned with the text.
BASELINE The image is bottom aligned with the text baseline.

Events

Among all the universal events, only the click event is supported.

Example

// xxx.ets
@Entry
@Component
struct SpanExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
      Text() {
        Span('This is the Span and ImageSpan component').fontSize(25).textCase(TextCase.Normal)
          .decoration({ type: TextDecorationType.None, color: Color.Pink })
      }.width('100%').textAlign(TextAlign.Center)
      Text() {
        ImageSpan($r('app.media.icon'))
          .width('200px')
          .height('200px')
          .objectFit(ImageFit.Fill)
          .verticalAlign(ImageSpanAlignment.CENTER)
        Span('I am LineThrough-span')
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(25)
        ImageSpan($r('app.media.icon'))
          .width('50px')
          .height('50px')
          .verticalAlign(ImageSpanAlignment.TOP)
        Span('I am Underline-span')
          .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25)
        ImageSpan($r('app.media.icon'))
          .size({width:'100px', height:'100px'})
          .verticalAlign(ImageSpanAlignment.BASELINE)
        Span('I am Underline-span')
          .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(25)
        ImageSpan($r('app.media.icon'))
          .width('70px')
          .height('70px')
          .verticalAlign(ImageSpanAlignment.BOTTOM)
        Span('I am Underline-span')
          .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(50)
      }
      .width('100%')
      .textIndent(50)
    }.width('100%').height('100%').padding({ left: 0, right: 0, top: 0 })
  }
}

imagespan