mp-html icon indicating copy to clipboard operation
mp-html copied to clipboard

同一篇富文本内容,在普通H5页面里图片可以正常显示,但是在微信小程序不显示

Open lqyc opened this issue 2 years ago • 7 comments

使用环境

平台:微信小程序 基础库版本: 2.30.3 机型: 安卓和ios

问题描述

同一篇富文本内容,在普通H5页面里图片可以正常显示,但是在微信小程序不显示。

复现方式

富文本需要显示图片的地方外层自动加上了一层view, 样式里有display: inline-block;

  • 场景一:当去掉外层view这个样式,图片可以有自己的 高度,图片正常显示。 image image

  • 场景二:没有去掉外层样式display: inline-block;图片高度为0,不显示。 image

引用插件

mp-html 版本: v2.4.0

      <mp-html wx:if="{{content}}" content="{{content}}" selectable="force" show-img-menu="{{true}}" />

lqyc avatar Apr 27 '23 07:04 lqyc

提供可复现的 html 内容

jin-yufeng avatar May 13 '23 09:05 jin-yufeng

提供可复现的 html 内容

已提供,导出的一个常量文件,就是富文本内容。已测试该端富文本:

  • 用微信富文本组件可以显示图片:
<rich-text nodes="{{richNode}}"></rich-text> 
  • 用mp-html 不显示图片:
<mp-html  content="{{richNode}}" selectable="force" show-img-menu="{{true}}" />

富文本内容word文档: 富文本内容.docx

lqyc avatar May 16 '23 09:05 lqyc

提供可复现的 html 内容

有结论了吗?富文本已提供

lqyc avatar May 18 '23 05:05 lqyc

目前测试了一下。因为微信小程序会额外加一层view, 如场景1图1所示。这时候这层view的高宽为0, 所以内部图片如果指定100%,则图片宽高也为0,所以不显示。

任选一个即可。 [推荐1]

1、如果去掉富文本style 中的width:100%!important; 正常显示
2、修改组件mp-html/node/node.vue style ._img

/* 图片默认效果 */
._img {
    min-width: 720rpx; //新增部分
  max-width: 100%;
  -webkit-touch-callout: none;
}

whoooami avatar Jul 18 '23 10:07 whoooami

目前测试了一下。因为微信小程序会额外加一层view, 如场景1图1所示。这时候这层view的高宽为0, 所以内部图片如果指定100%,则图片宽高也为0,所以不显示。

任选一个即可。 [推荐1]

1、如果去掉富文本style 中的width:100%!important; 正常显示 2、修改组件mp-html/node/node.vue style ._img

/* 图片默认效果 */
._img {
    min-width: 720rpx; //新增部分
  max-width: 100%;
  -webkit-touch-callout: none;
}

我们按您的指示修改组件mp-html/node/node.vue style ._img的图片默认效果样式,但是这个最小图片宽度会影响小图的展示。有些图片可能只有不到720rpx宽度。 如图所示:去掉最新宽带才显示正常,如图:

lqyc avatar Aug 09 '23 07:08 lqyc

我们按您的指示修改组件mp-html/node/node.vue style ._img的图片默认效果样式,但是这个最小图片宽度会影响小图的展示。有些图片可能只有不到720rpx宽度。 如图所示: 去掉最新宽带才显示正常,如图: 企业微信截图_16915462947276

企业微信截图_16915462757367

lqyc avatar Aug 09 '23 07:08 lqyc

的确,方式2的侵入性会比较强,所以方案1的方式在您那边展现是?此外还需要麻烦提供最新可复现的html

whoooami avatar Aug 10 '23 02:08 whoooami