rich-text组件不支持图片点击事件，因其为原生渲染且内部节点不可交互；需用正则提取html中img的src，改用image标签并绑定bindtap实现点击预览。
rich-text 组件本身不支持图片点击事件
uni-app 的 rich-text 是原生渲染组件，内部节点不可交互，bindtap 在图片或任意子节点上完全无效。这不是写法问题，而是设计限制——它只负责安全地渲染 HTML 字符串，不透出 DOM 事件。
常见错误现象：<rich-text nodes="{{html}}" bindtap="onTap"></rich-text> 点击无响应；给 <img> 加 onclick 或 data-src 属性也无效，这些属性在渲染时被过滤或忽略。
- 必须放弃直接监听
rich-text内部图片的想法 - 不能依赖
nodes中的自定义属性触发逻辑（如data-preview="true"） - 服务端返回的富文本 HTML 不建议硬塞交互逻辑，应保持语义纯净
用正则提取图片 URL 后手动渲染 image 标签
核心思路：不依赖 rich-text 渲染图片，而是先解析 HTML 字符串，抽取出所有 <img> 的 src，再用 <image></image> 组件替代，并绑定 bindtap。
实操建议：
- 用正则
/<img>]*src=[\'\"]([^\'\"]+)[\'\"][^>]*>/gi提取所有图片地址（注意处理空格、换行、单双引号） - 将原始 HTML 拆成「文本段落 + 图片区」交替结构，例如用
split(/<img>]*>/)切分，再逐段渲染<text></text>和<image></image> -
<image></image>必须设置mode="widthFix"或明确宽高，否则在 iOS 上可能不显示 - 预览时调用
uni.previewImage({ sources: [url1, url2], current: index })，传入完整图片数组和当前索引
示例片段（Vue 2 语法）：
computed: {
parsedNodes() {
const imgRegex = /@@##@@]*src=[\'\"]([^\'\"]+)[\'\"][^>]*>/gi;
let result = [];
let lastIndex = 0;
let match;
while ((match = imgRegex.exec(this.rawHtml)) !== null) {
// 文本段
if (match.index > lastIndex) {
result.push({ name: 'text', children: [{ text: this.rawHtml.slice(lastIndex, match.index) }] });
}
// 图片段
result.push({ name: 'image', attrs: { src: match[1], 'data-index': result.length } });
lastIndex = imgRegex.lastIndex;
}
if (lastIndex
<h3>监听 rich-text 区域 tap 并反向定位图片位置</h3>
<p>如果富文本结构复杂（含嵌套、样式、多图混排），正则拆分易出错，可退而求其次：监听整个 <code>rich-text</code> 的 <code>bindtap</code>，再通过 <code>uni.createSelectorQuery()</code> 查询图片节点位置，结合点击坐标判断是否落在某张图上。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2488" title="uni-app"><img
src="https://img.php.cn/upload/manual/001/431/639/6a6029e0c4cd4231.png" alt="uni-app" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2488" title="uni-app" class="overflowclass">uni-app</a>
<p class="overflowclass">uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2488" title="uni-app" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>但该方案有明显缺陷：</p>
- Android 和 iOS 对
rich-text节点的boundingClientRect支持不一致，iOS 常返回{top: 0, left: 0, width: 0, height: 0} - 无法获取准确的图片索引，尤其当多张图尺寸相同、位置接近时，容错率低
- 需手动计算坐标偏移，受页面缩放、滚动、字体大小影响，维护成本高
仅建议用于简单图文混排且对兼容性要求不高的内部工具场景，生产环境慎用。
uni-app 3.0+ 使用 web-view 嵌入可交互 HTML
若业务强依赖富文本交互（如点赞、收藏、跳转），又不愿自己解析 HTML，web-view 是更可控的选择：它本质是内嵌 WebView，支持完整 DOM 事件和 CSS。
关键注意事项：
-
web-view的 src 必须是 HTTPS 地址或本地static目录下的 HTML 文件（如/static/article.html） - 不能直接传 HTML 字符串，需提前生成 HTML 文件或走接口返回静态页
- 与 Vue 页面通信需通过
web-view的postMessage+message事件，跨域限制严格 - 首次加载有白屏、性能略低于
rich-text，且部分安卓机型存在 touch 事件延迟
适合中长图文、营销页等对交互要求高、更新频率低的内容场景。
真正难的不是怎么让图片点开，而是决定要不要绕过 rich-text 这个“安全沙盒”——一旦选择手动解析或切到 web-view，就要承担后续 HTML 结构变更、XSS 过滤、图片懒加载、CDN 路径替换等一系列连带问题。
