# 图文混排时Image组件交互事件无响应如何解决

#### 问题现象

使用Text组件的StyledString/MutableStyledString实现图文混排富文本展示功能，预计实现URL链接点击跳转能力，图片点击放大能力，以及文本样式展示能力，但在实现过程中发现，当设置StyledString/MutableStyledString的value值ImageAttachment或CustomSpan时，style参数不生效。

#### 背景知识

*   属性字符串（StyledString/MutableStyledString）：是功能强大的标记对象，可用于字符或段落级别设置文本样式。通过将StyledString附加到文本组件，可以通过多种方式更改文本，包括修改字号、添加字体颜色、使文本可点击以及自定义方式绘制文本等。
*   ImageAttachment：用来在属性字符串中添加图片时使用的图片对象。
*   ImageSpan：Text、ContainerSpan组件的子组件，用于显示行内图片。

#### 问题定位

属性字符串（StyledString/MutableStyledString）的constructor()构造函数，当value的类型为ImageAttachment或CustomSpan时，style参数不生效。需要设置style时，通过setStyle等方法实现。

#### 分析结论

ImageAttachment需要通过setStyle()方法来设置style，并添加点击事件。或者也可以使用组件Span和ImageSpan代替属性字符串，添加点击事件实现交互事件。

#### 修改建议

通过setStyle()方法来设置style并绑定点击事件。

```
@Entry
@Component
struct StyledStringExample {
  controller: TextController = new TextController();
  image: ImageAttachment = new ImageAttachment({
    resourceValue: $r('app.media.startIcon'),
    size: { width: 50, height: 50 },
  });
  spanStyle: SpanStyle = {
    start: 0,
    length: 1,
    styledKey: StyledStringKey.GESTURE,
    styledValue: new GestureStyle({
      onClick: () => {
        console.info('clickGestureAttr object trigger click event');
      }
    })
  };
  arrayList: Array<StyleOptions> = [this.spanStyle];
  mutableStyledString: MutableStyledString = new MutableStyledString(this.image);

  onPageShow(): void {
    // 通过setStyle方法，给图片添加样式
    this.mutableStyledString.setStyle(this.spanStyle);
    this.controller.setStyledString(this.mutableStyledString);
  }

  build() {
    Column() {
      // 点击图片出现弹窗
      Text(undefined, { controller: this.controller })
        .borderWidth(1)
    }.padding(50)
  }
}
```

#### 常见FAQ

Q：如何解决属性字符串添加点击事件失效问题？

A：点击事件为函数内创建的临时对象时，其生命周期较短，函数执行完后就被释放了，导致点击事件生效时间短。需增加点击事件的生命周期，将其设置为全局变量，或者页面成员变量即可。