rich-text 的 itemclick 事件怎么监听图片点击

uni-app 中 rich-text 渲染富文本时，原生不支持直接给内部 img 绑定 @click，必须用 @itemclick 捕获节点事件。关键点是：事件对象里没有直接的 target，得从 e.detail.node 里逐层判断。

常见错误是只检查 node.name === 'img'，但漏了大小写或嵌套结构（比如 img 被 span 或 figure 包裹）。实际应递归查找或用 node.name.toLowerCase() === 'img' 容错。

• @itemclick 必须加在 <rich-text> 上，不能写在子元素里
• 微信小程序真机上，e.detail.node.attrs.src 可能为空——某些富文本编辑器导出时把图片地址存在 data-src 或 data-original 里，需提前清洗
• H5 端 itemclick 不触发，这是已知限制，得 fallback 到 DOM 事件代理（见下一条）

小程序端 uni.previewImage 传参为什么总失败

富文本里的图片路径往往不合规，导致 uni.previewImage 静默失败（尤其微信小程序），不是代码没跑，而是路径被拦截了。

典型问题：

• 传了 /static/xxx.jpg：微信小程序不认本地路径，必须是 https:// 或合法 base64；H5 可用，App 端可读 file 协议，但跨端就崩
• current 写成字符串如 '0'：必须是数字索引，否则安卓定位错位
• urls 数组里混入空字符串或 null：整个预览会中断，建议过滤：urls.filter(u => u && typeof u === 'string' && u.trim())
• 域名没加白名单：检查 manifest.json → “微信小程序服务器域名”，图片地址的协议、域名、端口必须完全匹配（https://api.example.com ≠ https://example.com）

H5 端富文本图片点击放大怎么补位

rich-text 的 itemclick 在 H5 不生效，这是 uni-app 的底层限制，没法绕过。唯一可靠方案是用原生 DOM 事件代理。

做法是在 mounted 钩子中，用 document.querySelector 找到渲染后的 rich-text 容器（注意 class 或 id 标识），然后监听其 click 事件，再用 e.target.tagName === 'IMG' 判断：

mounted() {
  const rt = document.querySelector('.rich-text-container')
  if (rt) {
    rt.addEventListener('click', e => {
      if (e.target.tagName === 'IMG') {
        const src = e.target.getAttribute('src')
        uni.previewImage({ urls: [src] })
      }
    })
  }
}

注意：这个逻辑只应在 H5 平台执行（process.env.UNI_PLATFORM === 'h5'），否则会干扰小程序原生事件。

base64 图片如何安全传给 uni.previewImage

当富文本图片来自用户上传或本地资源，又必须兼容微信小程序时，转 base64 是常用兜底方案，但有硬限制：单图不能超过 10MB，且 base64 字符串本身会显著增大内存占用。

正确做法不是全量转，而是按需处理：

• 先判断路径是否以 data:image/ 开头——已经是 base64，直接 push 进 urls
• 否则，用 uni.getFileSystemManager().readFile 读取本地路径（如 /static/xxx.jpg），再调用 uni.getFileSystemManager().getFileInfo 校验大小，超 2MB 就放弃转 base64，改提示“图片过大，无法预览”
• 微信小程序要求 base64 前缀必须是 data:image/jpeg;base64, 或 data:image/png;base64,，不能少 base64, 这部分，否则报错 fail errCode: -1

跨端最省心的做法，还是把富文本里的图片统一走 CDN，静态资源 build 时自动替换路径，避免运行时各种适配。这点容易被忽略，但长期看比 patch 各种平台差异更可控。