nvue页面rich-text组件img 和文字对不齐

分类：uni-app

rich_text nvue

图片显示不全并且图片文字无法对齐 line-height lineHeight vertical-align verticalAlign都尝试了 nvue页面

2022-03-23 14:41 负责人:DCloud_Android_ST 分享

4 个回复

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

<template>
<view>
<rich-text: nodes = "nodes"></rich-text>
</view>
</template>
<script>
export default {
data() {
return {
nodes: [{
"name": "img",
"attrs": {
"src": "https://t.bopo.com/web/statics/emoji/emoji3.png",
"alt": "[狂笑]",
"width": "12px",
"height": "12px"
}
}, {
"name": "img",
"attrs": {
"src": "https://t.bopo.com/web/statics/emoji/emoji10.png",
"alt": "[吃惊]",
"width": "12px",
"height": "12px"
}
}]
}
}
}
</script>

DCloud_uni-ad_HDX

设置字体大小和表情大小一致

<template>  
  <view class="content">  
    <rich-text class="rich-text" :nodes="nodes"></rich-text>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        nodes: [{  
          name: 'div',  
          attrs: {  
            style: 'color: red; vertical-align: middle;'  
          },  
          children: [{  
            "type": "text",  
            "text": 'Hello uni-app!',  
            "attrs": {  
              "style": 'fontSize: 30px; lineHeight: 30px; color: green;'  
            }  
          }, {  
            "name": "img",  
            "attrs": {  
              "src": "/static/logo.png",  
              "alt": "[狂笑]",  
              "width": "30px",  
              "height": "30px"  
            }  
          }, {  
            "name": "img",  
            "attrs": {  
              "src": "/static/logo.png",  
              "alt": "[吃惊]",  
              "width": "30px",  
              "height": "30px"  
            }  
          }]  
        }]  
      }  
    }  
  }  
</script>  

<style>  
  .content {  
    display: flex;  
    flex-direction: column;  
    flex: 1;  
  }  

  .rich-text {  
    flex: 1;  
  }  
</style>