uni-app nvue中 rich-text 不显示

uni-app nvue中 rich-text 不显示

测试过的手机

三星S9/Android 10；iPhone 14/ios16.4

示例代码：

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

<script>  
    export default {   
        data() {  
            return {  
                strings: '<div style="text-align:center;"><img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></div>'  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .content {  
        background-color: #ffffff;  
    }  
</style>

操作步骤：

无

预期结果：

显示预期富文本内容

实际结果：

空白

bug描述：

在nvue页面中使用基础组件中的富文本rich-text组件，结果富文本内容不显示


更多关于uni-app nvue中 rich-text 不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

App-nvue 和支付宝小程序不支持 HTML String 方式

更多关于uni-app nvue中 rich-text 不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在nvue中使用rich-text组件确实存在一些限制。根据你的代码和描述，问题可能出在以下几个方面：

  1. nvue环境下rich-text组件对HTML支持有限，特别是对div等标签的支持可能不完全。建议改用view标签替代div。

  2. nvue的rich-text对样式支持较弱，特别是scoped样式可能无法正确应用。

  3. 图片加载可能需要使用base64编码或本地路径，网络图片在nvue中有时加载会有问题。

修改建议：

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

<script>  
    export default {   
        data() {  
            return {  
                strings: '<view style="text-align:center;"><image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"/></view>'
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        background-color: #ffffff;  
    }  
</style>
回到顶部