小程序通过rich-text实现字符串转化为html,即 <rich-text node="{{html}}"></rich-text>。如果html字符串中含有img标签,并且img不能自适应,应该怎样解决呢??
  下面是解决方法

两种方式:

  1. 给img加个class,在app.wxss或page.wxss中指定样式。

  2. 给img加style

    首先通过将数据转化为json字符串
    var jsonDa = JSON.stringify(res.data.data.ques).replace(/<img/gi, "<img class='richImg'style='width:auto!important;height:auto!important;max-height:100%;width:100%;'");
    var newResData = JSON.parse(jsonDa);
    console.log(newResData);//得到的数据含有img标签的都有richImg类
    this.setData({
    arrList:newResData
    }) app.wxss
    rich-text .richImg{
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    height: auto!important;
    width: auto!important;
    }

      

小程序怎样控制rich-text中的<img>标签自适应的更多相关文章

  1. 微信小程序wifi控制开发

    小程序wifi控制开发方案 ----- 由小程序通过公众号给wifi控制板进行配网,后台服务器自动生成设备名并注册在数据库中,wifi控制板自动保存生成的设备名,小程序可读取WIFI控制板的数据,控制 ...

  2. 微信小程序练习笔记(更新中。。。)

    微信小程序练习笔记 微信小程序的练习笔记,用来整理思路的,文档持续更新中... 案例一:实现行的删除和增加操作  test.js // 当我们在特定方法中创建对象或者定义变量给与初始值的时候,它是局部 ...

  3. 微信小程序的坑(持续更新中)

    参与微信小程序开发有一段时间了,先后完成信息查询类和交易类的两个不同性质的小程序产品的开发:期间遇到各种各样的小程序开发的坑,有的是小程序基础功能不断改进完善而需要业务持续的适配,有的是小程序使用上的 ...

  4. 微信小程序view不能换行 text实现转义换行符

    在html中可以直接使用<br />换行,但是小程序wxml中使用<br />无效,可以换成\n Page({ data: { title: '至少5个字\n请多说些感受吧' ...

  5. 微信小程序------MD5加密(支持中文和不支持中文)和网络请求(get和post)

    开发中常常遇到MD5加密,最近做小程序也用到了,简单总结了一下: 这要有两个加密文件,一个不支持中文,一个支持,所以你选择支持的来用就行了: 也随便说说小程序的get和post网络请求. 来看看效果图 ...

  6. 微信小程序和微信H5测试中易出Bug的点和注意事项

    一.微信小程序 易出Bug的点: 小程序的分享转发功能 背景:小程序项目开发基本完毕也都已经测过几轮,功能上基本没有什么问题,但是上线后却被客户发现通过分享转发小程序给别人,别人无法正常打开的情况 原 ...

  7. 小程序开发之改变data中数组或对象的某一属性值

    前言:在小程序的开发中,我们在view中便利data中数组或对象时,很多情况下需要在js中动态改变数组或者对象中某一香的属性值. 效果图: 我给大家总结了案例如下:   wxml如下: <scr ...

  8. ASP.NET 程序提交表单数据中带有html标签不能提交或者提交报错问题

    今天在公司做另外的一个项目,又奇葩的遇到一个问题. 在本地自己电脑上怎么测试都是正常的.但是先上服务器就出问题: 用富文本编辑器上传一篇文章,始终报错,又没提示具体什么错误,也没说代码错误,点击提交按 ...

  9. 微信小程序之页面引用utils中的js文件

    /* 只可使用相对路径 */const utils = require('../../../utils/util.js') Page({})

随机推荐

  1. csp-s模拟测试99

    csp-s模拟测试99 九九归一直接爆炸. $T1$一眼板子. $T2$一眼语文题(语文的唯一一次$120+$是给模拟出来的可知我的语文能力). $T3$一眼普及题. ?? Hours Later 板 ...

  2. 学习笔记——CDQ分治

    再次感谢这位大佬的博客:https://www.cnblogs.com/ljc20020730/p/10395866.html CDQ分治,是一种在分治合并中计算前面值对后面答案的贡献的一种算法.今天 ...

  3. 2.1_springboot2.x消息介绍&RabbitMQ运行机制

    1.概述 1.大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力 2.消息服务中两个重要概念: ​ 消息代理(message broker)即消息服务器 和目的地(destination ...

  4. 字符编码到python编辑器流程

    字符(存储了信息的东西)编码(): 键盘发送的是电流-->主机(内存)接受到电流(当作010100110101)-->显示屏 接受电流(当作010100110101------->键 ...

  5. ubontu 16 下的 pylon5 安装

    想用wine,然后走了很多弯路.后来发现正确的安装和配置pylon即可.注意32位和64位不可以混淆. If you choose to install in a different director ...

  6. 2019-5-8-WPF-绑定命令在-MVVM-的-CanExecute-和-Execute-在按钮点击都没触发可能的原因...

    title author date CreateTime categories WPF 绑定命令在 MVVM 的 CanExecute 和 Execute 在按钮点击都没触发可能的原因 lindexi ...

  7. 2019-3-16-win10-uwp-在-ItemsPanelTemplate-里面通过样式绑定-Orientation-显示方向

    title author date CreateTime categories win10 uwp 在 ItemsPanelTemplate 里面通过样式绑定 Orientation 显示方向 lin ...

  8. 关于SQL server2017无法连接远程服务器的问题

    安装了SQL server2017,能连接上本地数据库,但是连接远程数据库则老报错,什么实例错误之类的,百度找了也是什么打开sql server 服务,什么修改端口1433,什么TCP协议之类的,全部 ...

  9. html编写的日历

    1.html (1) <html> <head> <meta http-equiv="Content-Type" content="text ...

  10. 360自动抢票还不够,几行js代码设置无人值守

    360就是牛逼哄哄的...... 但是最近在使用360浏览器抢票的时候还是发现了一些体验不好的地方,比如搞着搞着就退出了登录,有时候能帮你自动登录进去,但是自动登录之后又不会帮你自动开始抢.然后验证码 ...