# 无法查看头像

#### 问题现象

点击头像没有反应，无法进行大图预览。

#### 背景知识

*   DevEco Testing：DevEco Testing是一款专项集成测试工具，提供了多项测试能力。DevEco Testing将测试能力以测试服务卡片的形式呈现给用户，无需复杂的配置，即可一键执行测试任务，同时提供了测试报告和分析，辅助开发者发现应用和产品问题，提升应用质量。
*   CustomDialog：通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，优先考虑自定义弹窗，便于弹窗样式与内容的自定义。

#### 问题定位

通过DevEco Testing工具的实用工具下的UIViewer，获取页面的DOM树，找到图片所在节点，排查clickable属性是否为true。

#### 分析结论

通过页面DOM树，找到对应节点下的Image标签，查看clickable属性为false，表示没有添加点击事件无法进行大图预览。

#### 修改建议

1.  创建一个自定义弹窗存放预览的大图。
2.  对自定义弹窗的控制器dialogController进行初始化设置宽高、圆角、背景色等参数。
3.  将显示自定义弹窗内容的open()方法添加到Image组件点击事件中。

```
@Entry
@Component
struct ShowLargeImage {
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomImgDialogExample({}),
    autoCancel: true,
    alignment: DialogAlignment.Center,
    customStyle: false,
    cornerRadius:0,
    width: 300,
    height: 300,
    backgroundColor: Color.White,
    maskColor: '#ff050505'
  });

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    this.dialogController = null; // 将dialogController置空
  }

  build() {
    Column() {
      Image($r('app.media.startIcon'))
        .width(40)
        .height(40)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open();
          }
        })
    }
    .backgroundColor(Color.Pink)
    .height('100%')
    .width('100%')
  }
}

@CustomDialog
struct CustomImgDialogExample {
  controller?: CustomDialogController;
  build() {
    Column() {
      Image($r('app.media.startIcon'))
        .height('100%')
        .width('100%')
    }
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
  }
}
```