OpenHarmony验证码为何不显示

在 OpenHarmony 应用开发中，“验证码不显示”通常不是系统问题，而是代码实现或资源配置导致的。下面按常见原因和排查思路给你说明：

一、常见原因汇总

1. 图片验证码（Image / 网络图片）不显示

最常见原因：

• 图片地址错误（URL 拼错、接口未返回）
• 未配置网络权限
• 未在主线程更新 UI
• Image 组件宽高为 0

排查：

// module.json5
"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

Image(this.codeUrl)
  .width(100)
  .height(40)

✅ 确认：

• codeUrl 能直接在浏览器打开
• Image 有固定宽高
• 接口返回的是图片流（不是 JSON）

2. 自定义绘制验证码（Canvas）不显示

常见错误：

• Canvas 未设置宽高
• onReady 之前绘制
• 未调用 invalidate() / 重绘

正确示例：

Canvas(this.context)
  .width(120)
  .height(40)
  .onReady(() => {
    this.drawCode()
  })

drawCode() {
  const ctx = this.context
  ctx.clearRect(0, 0, 120, 40)
  ctx.font = '30px sans-serif'
  ctx.fillText(this.code, 10, 35)
}

⚠️ 注意：

• Canvas 必须设置宽高
• 绘制逻辑放在 onReady

3. 验证码接口未返回 / 返回异常

• 后端未生成验证码
• Session / Token 未传
• 接口跨域或被拦截

排查：

• 用 DevEco Network 看请求
• 看接口返回内容（图片 / base64 / 错误码）

4. 使用 Base64 验证码不显示

错误写法：

Image(base64) // ❌

正确写法：

Image('data:image/png;base64,' + base64)

5. 样式或布局问题导致“看不见”

• 被其他组件遮挡
• 父容器 visibility: hidden
• opacity = 0

二、快速自检清单 ✅

• [ ] 是否配置 INTERNET 权限
• [ ] Image / Canvas 是否设置宽高
• [ ] 验证码地址是否正确
• [ ] 是否在 onReady / 接口回调中更新
• [ ] 是否使用正确的图片格式

三、如果你愿意

你可以告诉我：

1. 验证码类型（图片 / Canvas / 短信）
2. 使用的组件（Image / Canvas / Web）
3. 是否有报错或接口返回

我可以直接帮你定位到具体代码问题。