Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lqyc opened this issue Apr 27, 2023 · 7 comments

Comments

@lqyc
Copy link

lqyc commented Apr 27, 2023

使用环境

平台:微信小程序
基础库版本: 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}}" />

@jin-yufeng
Copy link
Owner

提供可复现的 html 内容

@lqyc
Copy link
Author

lqyc commented May 16, 2023

提供可复现的 html 内容

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

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

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

@lqyc
Copy link
Author

lqyc commented May 18, 2023

提供可复现的 html 内容

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

@whoooami
Copy link
Contributor

whoooami commented Jul 18, 2023

目前测试了一下。因为微信小程序会额外加一层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;
}

@lqyc
Copy link
Author

lqyc commented Aug 9, 2023

目前测试了一下。因为微信小程序会额外加一层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
Copy link
Author

lqyc commented Aug 9, 2023

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

企业微信截图_16915462757367

@whoooami
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants