m***@protonmail.com
m***@protonmail.com
  • 发布:2022-05-25 14:09
  • 更新:2022-05-25 15:25
  • 阅读:370

【报Bug】nvue页面rich-text组件img 和文字对不齐,麻烦处理一下

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: 任何安卓型号,手机

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
 <template>  
    <view class="content">  
        <text style="margin-bottom: 20px;margin-top: 20px;">测试1:</text>  
        <rich-text :nodes="nodes"></rich-text>  
        <text style="margin-bottom: 20px;margin-top: 20px;">测试2:</text>  
        <rich-text :nodes="nodes1"></rich-text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                nodes: [  
                    {  
                        name: 'img',  
                        attrs: {  
                            width:'40rpx',  
                            height: '40rpx',  
                            src: `/static/0.png`,  
                        }  
                    },  
                    {  
                        name: 'img',  
                        attrs: {  
                            width:'40rpx',  
                            height: '40rpx',  
                            src: `/static/0.png`  
                        }  
                    },  
                ],  
                nodes1: [  
                    {  
                        name: 'text',  
                        text:'尽快解决哈,感谢你,这里偏上对不齐'  
                    },  
                    {  
                        name: 'img',  
                        attrs: {  
                            width:'40rpx',  
                            height: '40rpx',  
                            src: `/static/0.png`,  
                        }  
                    },  
                    {  
                        name: 'img',  
                        attrs: {  
                            width:'40rpx',  
                            height: '40rpx',  
                            src: `/static/0.png`  
                        }  
                    },  
                ],  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>

操作步骤:
 <template>  
    <view class="content">  
        <text style="margin-bottom: 20px;margin-top: 20px;">测试1:</text>  
        <rich-text :nodes="nodes"></rich-text>  
        <text style="margin-bottom: 20px;margin-top: 20px;">测试2:</text>  
        <rich-text :nodes="nodes1"></rich-text>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                nodes: [  
                    {  
                        name: 'img',  
                        attrs: {  
                            width:'40rpx',  
                            height: '40rpx',  
                            src: `/static/0.png`,  
                        }  
                    },  
                    {  
                        name: 'img',  
                        attrs: {  
                            width:'40rpx',  
                            height: '40rpx',  
                            src: `/static/0.png`  
                        }  
                    },  
                ],  
                nodes1: [  
                    {  
                        name: 'text',  
                        text:'尽快解决哈,感谢你,这里偏上对不齐'  
                    },  
                    {  
                        name: 'img',  
                        attrs: {  
                            width:'40rpx',  
                            height: '40rpx',  
                            src: `/static/0.png`,  
                        }  
                    },  
                    {  
                        name: 'img',  
                        attrs: {  
                            width:'40rpx',  
                            height: '40rpx',  
                            src: `/static/0.png`  
                        }  
                    },  
                ],  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>

预期结果:

正常显示

实际结果:

图片偏上

bug描述:

安卓表情是偏上移,全部为表情时只能显示一半,图文组合是可以显示全部图片,但是还是偏上,修改样式也不生效!

ios效果稍好,也有稍微上移

2022-05-25 14:09 负责人:无 分享
已邀请:
m***@protonmail.com

m***@protonmail.com (作者)

附件已上传,麻烦处理一下呗

  • 秃顶佩奇

    大佬,请问你解决这个问题了吗?

    2022-11-22 17:30

1***@qq.com

1***@qq.com

尝试用 align-items: center;一下如果解决不了的话 尝试使用调试工具 查看图片所占高度 是不是比 图片实际高度要高 如果是的话 尝试给图片加上样式 font-size:0;

  • m***@protonmail.com (作者)

    图片上加样式不生效,margin-top之类的也不行

    2022-05-25 15:31

  • 1***@qq.com

    回复 m***@protonmail.com: 我尝试了一下 确实没有效果 如果使用 颜文字的话 是否能够解决你的问题呐

    2022-05-25 15:44

该问题目前已经被锁定, 无法添加新回复