微信小程序rich-text富文本 解决图片超出屏幕宽度

问题:微信小程序rich-text富文本 图片超出屏幕宽度

  • 文本数据
  • 更改前效果
  • 解决办法
  • 最终效果

文本数据

微信小程序rich-text富文本 解决图片超出屏幕宽度_第1张图片

更改前效果

微信小程序rich-text富文本 解决图片超出屏幕宽度_第2张图片
微信小程序rich-text富文本 解决图片超出屏幕宽度_第3张图片
微信小程序rich-text富文本 解决图片超出屏幕宽度_第4张图片

解决办法

使用正则将数据中的img标签定义class或者直接写样式
再js文件中将数据进行修改

data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ') //正则替换

或者

 that.setData({
          content: res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
        })
 
或
 
 that.setData({
          content: res.data.contents.replace(', '<img style="max-width:100%;height:auto"')
        })

最终效果

微信小程序rich-text富文本 解决图片超出屏幕宽度_第5张图片
微信小程序rich-text富文本 解决图片超出屏幕宽度_第6张图片

你可能感兴趣的:(微信小程序,微信小程序,小程序)