uni-app nvue中使用rich-text img标签渲染异常

uni-app nvue中使用rich-text img标签渲染异常

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.0

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：红米10x pro

页面类型：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> ```

操作步骤：

richtext中添加img节点


预期结果：

正常一行显示

实际结果：

显示位置靠上


更多关于uni-app nvue中使用rich-text img标签渲染异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

demo示例提供一下

更多关于uni-app nvue中使用rich-text img标签渲染异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


<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>

nvue 优化过的 rich-text 组件预计会在下一个 alpha 带上，等更新后再试试

好的 十分感谢 目前可以用uparse代替 不过性能会差一点

在 nvue 中使用 rich-text 渲染 img 标签时出现位置异常，通常是由于 nvue 的渲染机制与 vue 页面不同所致。nvue 基于 Weex 原生渲染，对 CSS 支持有限，可能导致 rich-text 内 img 的垂直对齐方式异常。

原因分析：
nvue 的 rich-text 组件在处理内联元素（如 img）时，默认的 vertical-align 可能未生效，导致图片与文本基线对齐异常，出现“靠上显示”问题。

解决方案：

  1. 为 img 添加样式：在 nodes 数据中为 img 标签显式设置 vertical-align: middle 或 vertical-align: bottom，强制调整对齐方式。示例：
    nodes: [{
  "name": "img",
  "attrs": {
    "src": "https://t.bopo.com/web/statics/emoji/emoji3.png",
    "style": "vertical-align: middle; width: 12px; height: 12px;"  // 添加样式
  }
}]
  2. 使用包裹元素：将 img 包裹在 div 或 text 标签中，通过外层容器控制布局。例如：
    nodes: [{
  "name": "div",
  "attrs": { "style": "display: inline-block; vertical-align: middle;" },
  "children": [{
    "name": "img",
    "attrs": { "src": "https://t.bopo.com/web/statics/emoji/emoji3.png", "width": "12px", "height": "12px" }
  }]
}]
回到顶部