# ImageSpan使用场景

#### 问题现象

如何实现下图中的追加评论效果？

#### 效果预览

#### 背景知识

*   Span：作为Text、ContainerSpan组件的子组件，用于显示行内文本的组件。
*   ImageSpan：Text、ContainerSpan组件的子组件，用于显示行内图片。

#### 解决方案

将图片换成镂空图，ImageSpan使用margin属性调整位置。

```
@Entry
@Component
struct ImageSpanExample {
  content: string = '到了绿湖底部，面上神色一动。';

  build() {
    Column() {
      Text() {
        Span("\n" + this.content)
          .fontSize(20)
        Span('  11  ')
        ImageSpan($r('app.media.startIcon'))  // 需开发者换成镂空的图
          .width('26vp')
          .height('26vp')
          .margin({ left: -27, bottom: -2 })
      }
    }
    .width('100%')
    .height('100%')
  }
}
```