First, the case:

1. No size affects the overall layout

Ii. After modification:

Third, the above code display

1.wxml

<! --pages/articleInfo/articleInfo.wxml--><view class="articleInfo padding15">
  <rich-text nodes="{{articleInfoArray}}"></rich-text>
</view>
Copy the code

2.js

  // Request protocol interface
    wx.request({
      url: Request interface,data: {
        id:that.data.id
      },
      method: "GET".header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        console.log(res.data.list)
        wx.hideLoading();
        if(res.data.data=="success") {var jsonDa = JSON.stringify(res.data.list.content).replace(/<img/gi."<img class='richImg'");
          // Add CSS and style to img by iterating over the data
          var newResData = JSON.parse(jsonDa);
          console.log(newResData); // All data with img tags have richImg
          
          that.setData({
            articleInfoArray:newResData
          })
          wx.setNavigationBarTitle({
            title: res.data.list.title
          })
        }
        
      }
    })
Copy the code

3.wxcss

rich-text .richImg{
  max-width: 100%;
  max-height: 100%; vertical-align: middle; height: auto! important; width: auto! important; }Copy the code

Summary: Because the image has a class named richImg by parsing and compiling, we change its style structure by getting it to the size of the image for layout