uni-app中引入u-parse组件图片显示异常

uni-app开发小程序是,使用uParse富文本解析组件显示图片时。图片显示异常,超出屏幕尺寸。

分析发现图片尺寸被写死的,那么我们要如何调整解析后图片的尺寸来适配屏幕呢?

修改逻辑:获取屏幕尺寸从新计算宽度,计算宽度时,去掉留白部分的宽度。该宽度为48rpx。

修改位置如下:

    1、找到wxParseImg.vue文件。

    2、wxParseImg.vue中如图位置,代码替换。

//原代码:
const windowWidth = this.node.$screen.width - (2 * padding);
//替换后
// 固定留白48rpx。将rpx转化成px
let reduceWidth = 48 * uni.getSystemInfoSync().windowWidth / 750;
const windowWidth = this.node.$screen.width - reduceWidth;


    3、完成后,清理缓存。从新载入带图片需要解析的富文本数据。


六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!