# 针对iPhoneXR机型：小程序rich-text富文本图片不显示的问题（含截图）

• 客户手持设备说明：iPhoneXR手机，系统软件版本14.2 
• 微信版本：昨天刚更新的最新版本。

## 问题场景描述：

1. 因为直接v-html而不使用repairRichText，会导致页面图片宽度溢出屏幕（即图片显示不全）；
2. 若是使用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？