ImageSpan使用场景
=============

#### 问题现象

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c3/v3/q-rZSLXGR0-dZgSnfG2Tpg/zh-cn_image_0000002658791437.png?HW-CC-KV=V1&HW-CC-Date=20260709T133905Z&HW-CC-Expire=86400&HW-CC-Sign=922049E7DE6129D302B02162EAB14ED8D7A5BA50B1A38818ED7D02337BC75AD7 "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/44/v3/GdwJ2MLkSPaoVqW41lMWew/zh-cn_image_0000002628552050.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133905Z&HW-CC-Expire=86400&HW-CC-Sign=E7240044C2745FBA481543BCF2C9862433781804FA4642632DC8D75DB57E1DD2 "点击放大")

#### 背景知识

*   [Span](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-span)：作为Text、ContainerSpan组件的子组件，用于显示行内文本的组件。
*   [ImageSpan](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-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%')
  }
}