uni-app如何解决小程序端富文本内容中的图片点击放大

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 各种平台差异更可控。