1***@qq.com
1***@qq.com
  • 发布:2019-08-12 10:29
  • 更新:2021-09-18 15:18
  • 阅读:6053

uni-app小程序端富文本图片超出宽度

分类:uni-app

请问有什么解决办法嘛?网上找的方法不管用,在5+app显示就正常,小程序的中渲染出来的图片还是电端页面的大小,加了权重的css样式也没用。

2019-08-12 10:29 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_GSQ

DCloud_UNI_GSQ

看了你的代码,你的img,有两个style:

<img style="max-width:100%;height:auto;display:block;" class="rich_pages" data-ratio="4.146844660194175" data-s="300,640" data-src="https://mmbiz.qpic.cn/mmbiz_png/0NKvxhBCQtYcDxdhvcV4icickxh33OyVnJvhGDmg05rx0MK6S5TUxCu55WXYHic0Ey8ic1sulVr8fEiaOpwlB5THK2g/640?wx_fmt=png" data-type="png" data-w="824" style="" src="http://www.941bigdata.com.cn/wp-content/uploads/2019/06/bo-image-693756-1561460306-1.jpg"  />

另外你的img上有class,所以这样即可:

.rich_pages{  
    max-width:100%;  
}
  • 1***@qq.com (作者)

    非常感谢,已解决

    2019-08-16 15:34

8***@qq.com

8***@qq.com

/deep/ img {max-width: 100%;}

DCloud_UNI_GSQ

DCloud_UNI_GSQ

测试未复现问题,请提供一个单独能复现问题的示例。

  • 1***@qq.com (作者)

    我上传了接口返回的内容,要怎样才能让里面的图片适合小程序端呢?麻烦你了

    2019-08-12 11:18

  • 1***@qq.com (作者)

    老哥有空吗?

    2019-08-13 10:16

1***@qq.com

1***@qq.com (作者)

这个是接口返回的内容

  • DCloud_UNI_GSQ

    请提供能复现问题的demo项目工程,以及复现步骤

    2019-08-12 11:24

  • 1***@qq.com (作者)

    回复 DCloud_UNI_GSQ: 好的,上传了,麻烦你看下

    2019-08-12 11:36

1***@qq.com

1***@qq.com (作者)

demo项目工程

1***@qq.com

1***@qq.com (作者)

自己up

p***@163.com

p***@163.com

用xxxx.replace('<img', '<img style="width:xxx;"')替换掉

  • 1***@qq.com (作者)

    有用这个方法,在h5和app端就正常,但是小程序还是老样子

    2019-08-16 11:26

  • DCloud_UNI_GSQ

    回复 1***@qq.com: 这次问题帮你解决,希望以后能认真一些。另外有时间不要一直顶自己的问题,也去帮助他人。

    2019-08-16 14:46

e***@qq.com

e***@qq.com - 艾克不是火车

大哥咋解决的,现在这个问题困扰好久了

1***@qq.com

1***@qq.com

还没解决吗,他的代码加上
.rich_pages{
max-width:100%;
}
生效,因为他的富文本绑了个rich_pages的class
替换字符串改成这样就行了
richtext.replace("<img", '<img style="max-width:100%;height:auto;" class="rich_pages"');

要回复问题请先登录注册