这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以。

解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度。

replace(/\<img/gi,   '<img class="rich-img" ' );

就可以了

rich-text   .rich-img {

width: 100% ;

height: auto ;

}

微信小程序富文本中的图片大小超出屏幕的更多相关文章

  1. [微信小程序] 微信小程序富文本-wxParse的使用

    最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文 ...

  2. 微信小程序富文本渲染组件html2wxml及html2wxml代码块格式化在ios下字体过大问题

    1.组件使用: 之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:http ...

  3. 微信小程序-富文本解析插件wxParse基础使用及问题解决

    一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: ...

  4. 微信小程序 富文本插件 循环渲染方式

    感谢GitHub https://github.com/icindy/wxParse/wiki/wxParse%E5%A4%9A%E6%95%B0%E6%8D%AE%E5%BE%AA%E7%8E%AF ...

  5. 微信小程序富文本

    <div class="weui-panel__bd pad-all fs13 " > <rich-text nodes="{{detail.conte ...

  6. 适用于 Mpvue 的微信小程序富文本解析自定义组件

    废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxP ...

  7. [转]wxParse-微信小程序富文本解析组件

    本文转自:https://github.com/icindy/wxParse 基本使用方法 Copy文件夹wxParse - wxParse/ -wxParse.js(必须存在) -html2json ...

  8. 微信小程序rich-text 文本首行缩进和图片居中

    微信小程序开发使用rich-text组件渲染html格式的代码,常常因为不能自定义css导致文本不能缩进,以及图片不能居中等问题,这里可以考虑使用js的replace方法,替换字符串,然后在渲染的同时 ...

  9. 微信小程序和支付宝小程序富文本使用

    微信小程序使用的是 1. wxml 页面元素的最简单使用 <rich-text nodes="{{这是你的数据}}"></rich-text>   2. j ...

随机推荐

  1. Win10问题

    WIN10去除我的电脑上面的6个文件夹 把下面代码复制,保存到.reg中,然后执行即可(修改注册表文件.reg) Windows Registry Editor Version 5.00 ;如需还原去 ...

  2. activiti5/6 系列之--流程复用技术 callActivity

    定义:当流程执行到callActivity,会创建一个新分支,它是到达调用节点的流程的分支. 这个分支会用来执行子流程,默认创建并行子流程,就像一个普通的流程. 上级流程会等待子流程完成,然后才会继续 ...

  3. opencv学习之路(22)、轮廓查找与绘制(一)

    一.简介 图2 二.代码 #include"opencv2/opencv.hpp" #include<iostream> using namespace std; us ...

  4. JS设计模式(6)命令模式

    什么是命令模式? 定义:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化. 主要解决:在软件系统中,行为请求者与行为实现者通常是一种紧耦合的关系,但某些场合,比如需要对行为进行记录. ...

  5. GEC6818交叉开发环境搭建拟稿

    为manjaro linux配置交叉工具链 为gec6818开发版下载一个arm-2014.05-29-arm-none-linux-gnueabi-i686-pc-linux-gnu.tar.bz2 ...

  6. 使用Log4j2实现日志输出

    一.说明 如果是使用slf4j规范的,请先引用: <!-- https://mvnrepository.com/artifact/org.apache.logging.log4j/log4j-s ...

  7. Ubuntu 14 如何解压 .zip、.rar 文件

    .zip 和 .rar 是Windows下常用的压缩文件,在Ubuntu中如何解压. [解压.zip文件] Ubuntu中貌似已经安装了unzip软件,解压命令如下: unzip ./FileName ...

  8. apache kafka技术分享系列(目录索引)

    https://blog.csdn.net/lizhitao/article/details/39499283 https://blog.csdn.net/lizhitao

  9. php-parser在Aop编程中的使用

    在laravel下使用php-parser实现aop composer require nikic/php-parser Test.php <?php /** * Created by PhpS ...

  10. DP爬台阶问题

    1. 初级爬台阶 - 求最短步数 LC - 70 一次可以迈1-2个台阶,因此最短步数与前两个台阶有关. Initial state: 第一阶:1步 : 第二阶:1步 deduction functi ...