前言

• 本文是【uni-app】rich-text 無法處理 video 的解決辦法續集。
• 用 uParse 富文本解析插件后，一切正常。今天同事突然發了個長圖（800px*15150px）。發現版式異常了，如下：
  

分析

細心人可以看到，圖片的兩邊有留白。

通過上面的截圖可以看到，在保持寬高比的前提下，將圖片寬度調整為351.2px時，高度應該為6650.85px。
通過上面的截圖可以看到，image標簽的實際高度為7101.56px。那么，空白就出來了。

通過分析 uParse 組件，當發現圖片寬度超過屏幕實際寬度時，則為圖片自動計算一個合適的寬度和高度。

因在開發過程中，圖片兩邊的留白為48rpx，uParse 組件不知道留白了48rpx，因此計算屏幕寬度時，少減了48rpx。因此導致計算出的寬和高不合適。

解決辦法

計算寬度時，去掉留白部分的寬度。該寬度為48rpx。

找到 wxParseImg.vue 文件。

在 wxParseImg.vue 文件中找到如下代碼：

const windowWidth = this.node.$screen.width - (2 * padding);

將上面的代碼修改為：

// 固定留白48rpx。將rpx轉化成pxlet reduceWidth = 48 * uni.getSystemInfoSync().windowWidth / 750;const windowWidth = this.node.$screen.width - reduceWidth;

修改后效果

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的【uni-app】uParse 富文本解析插件遇到长图、大图宽高比异常问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。