图片显示不全 并且图片文字无法对齐 line-height lineHeight vertical-align verticalAlign都尝试了 nvue页面
![m***@protonmail.com](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/85/43/79_avatar_mid.jpg?v=1648892081)
- 发布:2022-03-23 14:41
- 更新:2022-04-06 10:34
- 阅读:782
![m***@protonmail.com](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/85/43/79_avatar_mid.jpg?v=1648892081)
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](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/01/98/35_avatar_mid.jpg?v=0)
设置字体大小和表情大小一致
<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>