针对iphoneXR机型:小程序 rich-text 富文本图片不显示的问题(含截图)
# 针对iPhoneXR机型:小程序rich-text富文本图片不显示的问题(含截图) 客户手持设备说明:iPhoneXR手机,系统软件版本14.2 微信版本:昨天刚更新的最新版本。 ## 问题场景描述: 因为直接v-html而不使用repairRichText,会导致页面图片宽度溢出屏幕(即图片显示不全);若是使用repairRichText,能解决图片宽度自适应问题(且iphone8、iphone11、iphone12、iphone14、鸿蒙、安卓等均正常显示图片) (但是客户发现自己的不能用, 客户手持设备等相关信息截图和当前案例代码,如下文描述) [图片] ## 当前问题截图: [图片] ## 当前相关代码 · 参考如下: richText.value = repairRichText(response.data.storyContent)
/**
* 富文本内容显示:
* 针对rich-text nodes富文本内容中涉及的(图片DOM的)宽度溢出等等问题的处理
* */
export function repairRichText (html: string) {
// 去掉<img>中style /width / height属性
let newContent = html.replace(/<img[^>]*>/gi, (match: any) => {
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '') // 去除 style=""这样的属性
return match
})
// img标签添加style属性:max-width:100%;height:auto
newContent = newContent.replace(/<img/gi,
'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
)
return newContent;
}
最后,请教一下看到此问题的朋友或专业技术人员,该如何处理此bug?