处理uni(小程序)开发中使用rich-text富文本解析,图片未自适应宽度问题（图片显示不全）

<template>
  <view class="page-main">
    <rich-text :nodes="content"></rich-text>
  </view>
</template>

<script setup>
  import {
    onLoad,
  } from "@dcloudio/uni-app";
  import {
    ref
  } from "vue";
  import {
    UTILS
  } from "@/utils/utils.js";

  const content = ref('')
  onLoad(async(option) => {
    content.value = await imgDeal(UTILS.getLocal('motivationTaskDescription'))
    await UTILS.clearLocal('motivationTaskDescription')
  });
  
  const imgDeal = (str)=>{
    return str.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;"');
  }
</script>

<style scoped lang="scss">
  .page-main {
    padding: 32rpx;
  }
</style>