【uni-app】 rich-text 中图片溢出_uniapp小程序如何使图片高度可以溢出父元素-CSDN博客

前言
Hbuilder X 2.7.14.20200618 （不清楚uniapp的版本，用工具版本代替）
微信小程序中预览的图片溢出效果（非期望效果）

-期望的效果

分析
rich-text 为已封装好的组件。向 rich-text传递参数后，由 rich-text进行展现（<rich-text :nodes="content|formatRichText"></rich-text>），目前未向开发者提供控制 rich-text展现的内容样式的方法。

代码1：图片溢出的代码（对应图片溢出效果）：

<img
style="margin: 0px auto; padding: 0px; display: block; max-width: 800px;"
src="https://img-xhpfm.zhongguowangshi.com/News/202008/20200810193928_6784.jpg" />
1
2
3
代码2：图片不溢出的代码（对应期望的效果）：

<img
style="max-width:100%;height:auto;display:block;margin:0px auto;"
src="https://img-xhpfm.zhongguowangshi.com/News/202008/20200810193928_6784.jpg" />

要解决图片溢出，只需要找到将代码1转化为代码2的方法即可。

方法
根据前面的思路，目前有2个方法:

nodes 为 String 类型时，用 replace 方法修改样式。
nodes 为 Array 类型时，遍历Array并修改节点属性（找到样式节点，并进行修改）。
因为支付宝小程序只支持nodes 为 Array 类型的使用方法，所以，方法2更通用一些，可以参考这里。
关于方法1的介绍，可以参考这里。下面介绍一下方法1。

另，下面这样的方法，在H5中有效：

   /* 在H5 rich-text 控件会被翻译为 uni-rich-text */
   uni-rich-text img {
       max-width: 100% !important;
   }
1
2
3
4
操作
1. 先编写修改样式的方法
   export default {
       components: {
       },
       data() {
           return {
           }
       },
       onReady() {
       },
       methods: {
           /**
           * 处理富文本里的图片宽度自适应
           * 1.去掉img标签里的style、width、height属性
           * 2.修改所有style里的width属性为max-width:100%
           * 3.img标签添加style属性：max-width:100%;height:auto
           * 4.去掉<br/>标签
           * @param html
           * @return string
           */
           formatRichText (html) {
               // 去掉img标签里的style、width、height属性
               let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
                   match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
                   match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
                   match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
                   return match;
               });
               // 修改所有style里的width属性为max-width:100%
               newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
                   match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
                   return match;
               });
               // 去掉<br/>标签
               newContent = newContent.replace(/<br[^>]*\/>/gi, '');
               // img标签添加style属性：max-width:100%;height:auto
               newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
               return newContent;
           }
       }
   }

2.修改样式的方法
<rich-text :nodes="formatRichText(content)"></rich-text>
1
3.改进
可以封装成js库，方便以后使用。

richTextUtil.js
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.修改所有style里的width属性为max-width:100%
* 3.img标签添加style属性：max-width:100%;height:auto
* 4.去掉<br/>标签
* @param html
* @return string
*/
function formatRichText (html) {
   // 去掉img标签里的style、width、height属性
   let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
       match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
       match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
       match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
       return match;
   });
   // 修改所有style里的width属性为max-width:100%
   newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
       match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
       return match;
   });
   // 去掉<br/>标签
   newContent = newContent.replace(/<br[^>]*\/>/gi, '');
   // img标签添加style属性：max-width:100%;height:auto
   newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin:0px auto;"');
   return newContent;
}

export default {
formatRichText,
};
引入js库
import richTextUtil from '@/common/richTextUtil.js';
1
调用方法
this.content = richTextUtil.formatRichText(res.content);
1
rich-text：

<rich-text :nodes="content"></rich-text>
1
参考
https://blog.csdn.net/qq_37682202/article/details/100522172
https://www.jb51.net/article/154976.htm
https://www.jianshu.com/p/b87a0ff0f5b4
————————————————
版权声明：本文为CSDN博主「sayyy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sayyy/article/details/107954323