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://或合法 base64H5 可用App 端可读 file 协议但跨端就崩current写成字符串如0必须是数字索引否则安卓定位错位urls数组里混入空字符串或null整个预览会中断建议过滤urls.filter(u u typeof u string u.trim())域名没加白名单检查manifest.json→ “微信小程序服务器域名”图片地址的协议、域名、端口必须完全匹配https://api.example.com≠https://example.comH5 端富文本图片点击放大怎么补位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 各种平台差异更可控。
