cabin
cabin
  • 发布:2019-12-28 23:46
  • 更新:2020-03-24 17:47
  • 阅读:2123

【报Bug】nvue uniapp模试 使用 rich-text 图片不显示

分类:nvue

详细问题描述

nvue uniapp模试 使用 rich-text 图片不显示,相同代码切换成VUE页面图片就正常显示

(DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题)

[内容]

重现步骤

[步骤]

[结果]
nvue uniapp模试 使用 rich-text 能正常显示图片
[期望]

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HBuilderX
[IDE版本号]
2.4.6
[windows版本号]
win10
[mac版本号]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
app
[运行端版本号]

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
HBuilderX
[编译模式是老模板模式还是新的自定义组件模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志,点右键打开文件所在目录,将log文件压缩成zip包上传]

[App问题请提供可重现问题的代码片段,你补充的细一点,问题就解决的快一点]

[App安装包或H5地址]

[可重现代码片段]
<template>
<view>
<rich-text ref="rich" :nodes="nodes" class="memo"></rich-text>
</view>
</template>

<script>
export default {
data() {
return {
nodes: [{
"name": "img",
"attrs": {
"src": "http://bytapi.zslot.cn/uploads/seller/20191226/d81b591e422429a8131f3334b4d7a3f3.png",
"width":"50px",
"height":"50px"
}
},{
"name": "span",
attrs: {
class: 'div-class',
style: 'line-height: 60px; color: red; text-align:center;'
},
children: [{
type: 'text',
text: 'Hello uni-app!'
}]
}]
}
},
onLoad(params) {

    },  
    onReady() {  

    },  
    methods: {  

    }  
}  

</script>

<style>

</style>

联系方式

[QQ]

2019-12-28 23:46 负责人:无 分享
已邀请:
DCloud_uniAD_HDX
  • cabin (作者)

    "style": "width:18px;height:18px;border-width: 2px;border-color: #FFFFFF;border-radius: 9px;padding-left:10px;"

    style 里面设置宽高是可以显示了,但其它样式 边框,圆角、padding-left 这些样式都不生效,这个是不是只支持部分样式?

    2019-12-30 16:37

  • 5***@qq.com

    我参考新闻模板做了,也成功把富文本转成数组,但是放到rich-text的nodes里,文字有显示,图片不显示

    [{"type":"text","text":"1356"},{"name":"img","attrs":{"style":"width:24px;height:24px;","src":"https://file.aalives.com/friend/chat/emoji/qq/4.gif"}},{"name":"img","attrs":{"style":"width:24px;height:24px;","src":"https://file.aalives.com/friend/chat/emoji/qq/1.gif"}},{"name":"img","attrs":{"style":"width:24px;height:24px;","src":"https://file.aalives.com/friend/chat/emoji/qq/4.gif"}},{"type":"text","text":"4567"}]

    2020-03-24 17:49

2***@qq.com

2***@qq.com - hjw1203

设置宽高

  • cabin (作者)

    "style": "width:18px;height:18px;border:1px solid #f00;border-radius:50%;"

    style 里面设置宽高是可以显示了,但其它样式 边框,圆角这些样式都不会生效吗

    2019-12-30 15:08

5***@qq.com

5***@qq.com

[{"type":"text","text":"1356"},{"name":"img","attrs":{"style":"width:24px;height:24px;","src":"https://file.aalives.com/friend/chat/emoji/qq/4.gif"}},{"name":"img","attrs":{"style":"width:24px;height:24px;","src":"https://file.aalives.com/friend/chat/emoji/qq/1.gif"}},{"name":"img","attrs":{"style":"width:24px;height:24px;","src":"https://file.aalives.com/friend/chat/emoji/qq/4.gif"}},{"type":"text","text":"4567"}]

我成功把富文本转成数组了,但还是不显示图片

  • 5***@qq.com

    gif不支持吗?PNG倒是可以

    2020-03-24 17:56

该问题目前已经被锁定, 无法添加新回复