@itemclick事件在小程序中支持img/a标签点击并获取节点属性，但在nvue页面完全无效；需改用正则解析+image组件或mp-html插件实现跨平台兼容。
rich-text 的 @itemclick 事件在小程序里能用，但有平台限制
微信/支付宝/百度等主流小程序平台支持 @itemclick，点击 <img> 或 <a></a> 标签时会触发，且能拿到被点击节点的完整属性。但这个事件在 nvue 页面中完全无效——这是最常被忽略的兼容性断点。
常见错误现象：<rich-text :nodes="html"></rich-text> 在 H5 或 App-vue 页面正常工作，在 nvue 里却静默无响应。
- 必须确认当前页面是
.vue后缀，而非.nvue -
e.detail.node是结构化节点对象，src在e.detail.node.attrs.src下，不是e.target.dataset.src - 如果富文本里混用了
<img src="xxx" data-index="2">，data-index不会被保留——attrs只包含标准 HTML 属性 - 预览前建议校验 URL：空字符串、相对路径、协议缺失（如
//xxx）都会导致uni.previewImage失败
正则提取 + 手动渲染 image 是跨平台最稳方案
当需要支持 nvue、或后端返回的 HTML 不规范（比如嵌套 div、带 style 冗余）、或想统一控制图片宽高时，放弃 rich-text 渲染图片本身，改用正则解析 + <image></image> 组件是最可控的做法。
核心难点不在提取，而在「分段渲染」：不能简单把整个 HTML 替换成一堆 <image></image>，否则段落文字丢失格式（如 <p></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/6a6029e7c5ceb581.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 官方文档、npm 包和项目创建入口。</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>、<strong></strong>）。
- 用
/<img>]*src=[\'\"]([^\'\"]+)[\'\"][^>]*>/gi提取所有src，注意匹配单双引号和换行符 - 用
this.rawHtml.split(/<img>]*>/)切出纯文本段，再逐段包裹<text></text>；每张图对应一个<image></image> -
<image></image>必须设mode="widthFix"或显式style="width:100%;height:auto;"，否则 iOS 下可能不显示 - 绑定
@tap="previewImage(index)"，传入当前图片在数组中的索引，避免靠 URL 匹配——URL 可能重复或含参数
mp-html 插件省事但要注意 img-mode 和域名白名单
如果你用的是 mp-html（推荐用于复杂富文本），它内置了图片点击预览，但默认不开启，且行为受两个关键配置影响：
-
:img-mode="'aspectFit'"或'widthFix'必须显式设置，否则图片可能拉伸或不显示 -
@click="onImgClick"事件只在图片被点击时触发，e.detail.src是原始 URL，需自行去重并构造urls数组 - 微信小程序必须将图片域名加入
request和downloadFile白名单，否则uni.previewImage加载失败，报错fail fail download file - 不要给
mp-html外层加position: absolute或overflow: hidden，会导致图片位置计算异常，点击区域偏移
预览时 current 参数填错会导致“永远从第一张开始”
这是线上最典型的体验 bug：用户点第三张图，结果预览器打开第一张。问题不在图片提取逻辑，而在 uni.previewImage 的 current 参数类型。
current 必须是字符串索引（如 "2"）或数字索引（如 2），不能是 URL 字符串。而很多开发者直接写 current: e.detail.node.attrs.src，导致预览器找不到匹配项，默认跳到第 0 张。
- 正确做法：维护一个全局图片数组
this.imageList = ['url1', 'url2', 'url3']，点击时传current: index - 如果用正则提取，确保提取顺序与渲染顺序严格一致——正则
exec的lastIndex和split的切分位置要对齐 - 调试时打印
console.log('点击索引:', index, '图片数组长度:', this.imageList.length)，避免越界
@itemclick 足够满足大多数 vue 页面需求；一旦涉及 nvue、复杂样式或定制交互，正则 + <image></image> 是唯一可靠路径；mp-html 适合长期维护的项目，但得接受它额外的体积和配置成本。
