APP端表格中的图片无法点击预览

[SihenZhang]

使用环境

基础平台：uni-app
uni-app版本：4.36.2024112817
vue版本：3.4.21
mp-html版本：2.5.0

问题描述

Vue 3 版本的 uni-app 环境中，APP 端的表格中的图片无法点击预览，也不会触发 imgtap 图片点击事件。

分析源代码得知，表格中的图片在非 WEB 环境中会使用 rich-text 组件进行渲染，通过触发 rich-text 组件的 tap 事件从而触发图片预览和 imgtap 事件。

mp-html/dist/uni-app/components/mp-html/node/node.vue

Lines 11 to 14 in 963d13d

	<!-- #ifndef H5 || (APP-PLUS && VUE2) -->
	<!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
	<rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="[{attrs:{style:n.attrs.style||'',src:n.attrs.src},name:'img'}]" :data-i="i" @tap.stop="imgTap" />
	<!-- #endif -->

而通过阅读 uni-app 源码和实际测试得知，目前版本的 uni-app 的 rich-text 组件在 img 标签被点击时会阻止事件冒泡，导致其无法触发 rich-text 上的事件从而无法预览图片。

复现方式

<table>
  <tbody>
    <tr>
      <td><img src="https://via.placeholder.com/400x200.png/3c9cff/fff" /></td>
    </tr>
  </tbody>
</table>

[jin-yufeng]

表格中的图片样式比较复杂，用小程序里的 image 标签模拟样式容易出错，因此直接使用 rich-text 显示，缺点就是无法点击，目前比较难解决