uniapp 小程序 中使用富文本rich-text 图片溢出问题解决方法

用v-html渲染富文本框，发现小程序图片没有办法自适应，采用css去修改，发现不生效。uni的v-html转换成小程序是rich-text标签，则我们直接使用rich-text来实现富文本的渲染

uniapp 小程序 中使用富文本rich-text 图片溢出问题解决方法

对于富文本框中的文字可以直接用css 修改标签样式控制，但是图片不行

对于图片 可以使用两种方式进行样式修改

1、 封装处理函数

封装公共函数 tag=true 默认图片最宽为父组件宽度，如果不需要最大宽度为父组件宽度可以给tag传false，通过class控制img的样式

在methods 函数中写入 处理函数richTextImg

//rich-text中的Img添加class 通过class 调整图片样式tag 默认图片宽度最宽为父组件宽度

//入参 value 为需要进行处理的富文本数据， tag为是否为图片添加最大宽度 

richTextImg(value,tag=true){

   if(value && value.indexOf('<img')!==-1){

       if(tag){

return value.replace(/\<img/gi,"<img class='richTextImg' style='max-width:100%;height:auto'")

       }else{

return value.replace(/\<img/gi,"<img class='richTextImg'")

        }

   }

   return value

}

2、 调用函数处理数据

在需要处理的富文本数据处调用

this.content = this.richTextImg(res.data.businessStory)

3、使用数据，达到效果

1）第一种使用行内样式进行修改

<view class="u-p-20 story ">

   <scroll-view scroll-y="true" v-if="content">

      <rich-text :nodes="content"></rich-text>

   </scroll-view>

   <view v-else class="q-position-center" >

      暂无数据

   </view>

</view>

2）使用Class 类名进行样式修改 适合样式复制多样

第一步中的richTextImg 函数中已经为img 函数添加了 class类

可以直接在css 样式中修改 img样式

// 建议先为父盒子添加class 类名，以防多个富文本样式混淆

.story{

   .richTextImg{

      max-width: 100%;

   }

}