图片显示不全 并且图片文字无法对齐 line-height lineHeight vertical-align verticalAlign都尝试了 nvue页面
3***@qq.com
- 发布：2020-06-29 11:05
- 更新：2022-03-23 16:53
- 阅读：1479
nvue页面rich-text组件img图片问题
分类：nvue
请提供一个简单的测试工程
-
<template>
<view>
<view style="border: 1px solid;">
<rich-text :nodes="nodes"></rich-text>
</view>
</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>2021-08-12 16:42
临时方案，设置字体和表情一样大
<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;'
},
children: [{
"type": "text",
"text": 'Hello uni-app!',
"attrs": {
"style": 'fontSize: 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> 
