uni-app rich-text nvue页面 img不显示 例子代码如下

uni-app rich-text nvue页面 img不显示 例子代码如下

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.2.3
手机系统 Android
手机系统版本号 Android 9.0
手机厂商 三星
手机机型 smg9500
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<view class="module-view">  
    <view class="module-view-title">会议纪要:</view>  
    <view class="module-view-text">  
        <rich-text :nodes="text"></rich-text>  
    </view>  
</view>  

const strings = '<div style="text-align:center;"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/ceb770c0-5164-11eb-8a36-ebb87efcf8c0.png"/></div>'  

this.text = HTMLParser(strings);

预期结果：

显示图片！！！！！！

实际结果：


更多关于uni-app rich-text nvue页面 img不显示 例子代码如下的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app rich-text nvue页面 img不显示 例子代码如下的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中，rich-text 组件默认不支持直接渲染网络图片，这是 nvue 与 vue 页面的一个重要区别。

你的代码问题在于：

  1. nvue 的 rich-text 需要将 <img> 标签的 src 属性转换为 data-src，并配合 @load 或 @error 事件手动加载图片。
  2. 需要使用 dom 模块或 bindingx 来处理图片的显示，或者将图片转为 base64 格式。

修改建议：
将 HTML 字符串中的 <img src="..."> 替换为 <img data-src="...">，并在 rich-text 上添加 @load 事件：

<rich-text :nodes="text" @load="imgLoad"></rich-text>

methods: {
    imgLoad(e) {
        // 手动设置图片的 src
        const img = e.detail.target;
        img.src = img.dataset.src;
    }
}

或者，在解析 HTML 时直接替换属性名：

const strings = '<div style="text-align:center;"><img src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/ceb770c0-5164-11eb-8a36-ebb87efcf8c0.png"/></div>';
const parsedString = strings.replace(/src=/g, 'data-src=');
this.text = HTMLParser(parsedString);
回到顶部