导读:在开发小程序时,使用rich-text组件显示富文本遇到图片过宽溢出的问题。解决方法是通过正则表达式匹配富文本中的`
                
                

 

 
                关键词:                        uniapp
                                            rich-text
                                            富文本
                                            图片
解析:该句中名词包括技术框架名称“uniapp”、组件标签“rich-text”、内容类型“富文本”以及多媒体元素“图片”。其中“问题”属于抽象概念而非实体名词,故不保留。
                                        
                    
                
            
        今天在做小程序时间,用rich-text组件显示富文本时发现图片太宽溢出了。怎么办?下面是一个简单的处理方法(当然也有其他的解决方案),方法如下:
		//处理图片溢出的问题
		let richtext = temp.content;
		const regex = new RegExp('<img', 'gi');
		richtext = richtext.replace(regex, `<img style="max-width: 100%;"`);
思路很简单 ,就是解析富文本中的img标签,给它强制加上最大宽度1000%,然后 rich-text中的node属性 就可以绑定richtext,图片就不会溢出了。
效果演示
处理前

处理后

        
 
 
 
 
 
 
                
                
                
        
                苏公网安备 32111202000338号