uniapp显示富文本

<template>
  <view>
    <view class="dade-image">
      <image src="https://i02piccdn.sogoucdn.com/812e96986d0d60b7"></image>
    </view>
    <view class="dade-ti">
      <view class="dade-padding">虫草面膜亮晶晶</view>
      <view class="dade-padding" style="color: red;">￥200.00</view>
      <view class="dade-display">
        <view>快递</view>
        <view class="dade-text">库存：200</view>
        <view style="position: absolute;right: 19rpx;">广东省 广州市</view>
      </view>
    </view>
    <view class="dade-goodsa">
      <view class="">商品详情</view>
    </view>
    <view class="dade-goodsa">
      <rich-text :nodes="strings"></rich-text>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        strings:''
      }
    },
    onLoad(){
      var data = '<p style="text-align: center;">333333</p><p><img src="http://dadesc.lcaa.cc:9080/ueditor/php/upload/image/20211020/1634736407861953.png" title="1634736407861953.png" alt="logo.png"/></p>';
            //富文本宽度100%
      data = data.replace(/\<img/g, "<img style='width: 100%;'")
      this.strings = data;
    },
    methods: {
    }
  }
</script>
<style lang="scss" scoped>
  .dade-image image{
    width: 100%;
    height: 640rpx;
  }
  .dade-ti{
    background-color: #ffffff;
    .dade-padding{
      padding: 15rpx 20rpx 15rpx 20rpx;
    }
    .dade-display{
      display: flex;
      padding: 15rpx 20rpx 15rpx 20rpx;
      width: 100%;
      color: #adadad;
      font-size: 29rpx;
      .dade-text{
        width: 69%;
        text-align: center;
      }
    }
  }
  .dade-goodsa{
    margin-top: 20rpx;
    width: 100%;
    background-color: #ffffff;
    padding: 20rpx 0 20rpx 0;
    text-align: center;
  }
  .dade-goodsa img{
    width: 750rpx;
    height: 100%;
  }
</style>