使用uniapp开发小程序rich-text组件生成图片过宽怎么

1、在App.vue组件中（h5），直接在App.vue修改即可：

2、2、关于小程序里面图片溢出问题，这里借鉴一个大神的文章（附上原文：https://www.jb51.net/article/154976.htm）

我将主要部分引入了我的vue页面：

<template>

<view class="page-body">

<view class="content_box">

<h3>{{articleStr.article_title}}</h3>

<view class="time">{{articleStr.add_time}}</view>

                <!-- 主要是引用 formatRichText 方法，定义如下filters 中  -->

<rich-text :nodes="articleStr.article_content|formatRichText"></rich-text>

<view class="clear"></view>

<view class="content_page" v-show="article_type != 3">

...

</view>

</view>

</view>

</template>

<script>

export default {

data() {

return {

articleStr: '',

articleStrUp: true,

articleStrDown: true,

dataImg: '',

article_type: ''

}

},

onLoad (el) {

...

},

methods: {

...

},

filters: {

/**

* 处理富文本里的图片宽度自适应

* 1.去掉img标签里的style、width、height属性

* 2.img标签添加style属性：max-width:100%;height:auto

* 3.修改所有style里的width属性为max-width:100%

* 4.去掉<br/>标签

* @param html

* @returns {void|string|*}

*/

formatRichText (html) { //控制小程序中图片大小

    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;

    });

    newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){

        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');

        return match;

    });

    newContent = newContent.replace(/<br[^>]*\/>/gi, '');

    newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');

    return newContent;

}

}

}

</script>

3、这个是一个大神分享的，未测试

不需要加过滤器，只需在要更改的css选择器前加上/deep/即可，因为在父组件中，是不可以直接修改子组件的样式的 如

/deep/ .content_box img{width:100%}