uni-app rich-text将字符串转化为html不显示图片-----打包后存在问题

已于 2022-03-30 16:09:38 修改
阅读量401 收藏
点赞数
分类专栏： uni-app 文章标签： vue uni-app
于 2022-03-28 16:00:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36557846/article/details/123797581
版权

问题描述

<rich-text :nodes="content" style="font-size: 30rpx;"></rich-text>

图片不显示
在这里插入图片描述

原因

在这里插入图片描述

解决办法

修改manifest.json中的路由

"router" : {
            "mode" : "hash",
			"base":""
        },

重新启动项目

存在问题：

打包发布后rich-text 图片显示不出来
在这里插入图片描述

maozuai~zi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在nvue中富文本rich-text不显示和图片不显示的解决
weixin_45979310的博客
02-18 2496
uniapp开发中，使用nvue方式，富文本及图片不展示的办法
微信小程序rich-text富文本图片不展示
L_rui_peng的博客
05-15 2152
解决方案： <rich-text nodes="{{content}}"></rich-text> 注: content中的图片地址必须为网络地址 以上图可展示，但是图片宽度超出容器？ 解决：两方法选其一即可 that.setData({ content: res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"') }) 或 that.setData({
uniapp微信小程序rich-text图片显示不全图片显示不了
wltsysterm的博客
04-18 3974
问题 uniapp里头要展示富文本内容，就得用rich-text标签，配合nodes属性，今天要显示如下的富文本，但是图片显示不了 <p>很不错的商品，可以选购下哦</p><figure class="image"><img src="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"></figure> 图片显
uni-app：rich-text显示异常
qq_44429079的博客
01-06 2323
rich-text显示异常 今天在项目中rich-text显示不出来，发现打印出来的内容样式没有问题，但是就是显示不出来 。。。后来发现text不是受信任的节点 把text改成span就好了
关于小程序rich-text组件（不支持视频节点、图片显示问题）
gmy00111的博客
05-06 896
项目中遇到问题，后台配置富文本内容，小程序渲染的时候出现图片显示问题和视频节点不显示，排查过程中发现图片显示没问题，返回数据就是这么大的尺寸，那就是怎么适配了（下面直接上代码），视频节点不显示问题，看了下微信文档，这个组件是不支持vedio标签的，说了这么多直接上代码吧！
uni-app rich-text组件富文本图片展示不全问题
xiaoyun888_的博客
09-07 998
背景：php+fastadmin+富文本插件上传富文本内容到数据库，uni-app渲染富文本内容。这里后端不需要特殊处理。uni-app的rich-text组件展示图片跑板。
UNIAPP富文本编辑器editor组件图标不显示的问题解决
m0_52375547的博客
10-24 3970
【代码】UNIAPP editor富文本编辑组件使用过程中出现图标不显示的问题解决方法
uni-app、微信小程序 富文本内容利用html2json转换成对应类似控件 rich-text 对应的数组资源格式！
06-10
4. **在rich-text组件中使用转换后的数据**：最后，将`richTextNodes`传递给uni-app或微信小程序的rich-text组件的`nodes`属性。 ```html <rich-text :nodes="richTextNodes"></rich-text> ``` 通过以上步骤，...
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app 自定义组件展示html富文本内容，可实现富文本html内容中 图片展示、视频播放、音频播放。
06-10
1. 图片展示：自定义组件可以通过接收JSON中的图片信息，使用uni-app的组件来显示图片，同时处理图片的点击事件、懒加载等功能。 2. 视频播放：对于视频，可以使用uni-app的组件来播放。自定义组件需要解析JSON中的...
uni-app实战在线教育类app开发-视频教程网盘链接提取码下载.txt
11-07
本季度基于uni-app实战开发在线教育类app和小程序，课程包括：图文，音频，视频，电子书、会员、直播、问答、考试、拼团秒杀、优惠券。一次开发，同时搞定Android、iOS、微信小程序、H5端。非常适合具有...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uniapp图片无法显示
热门推荐
progrmmmm的博客
01-13 2万+
首先确定是在什么环境下不展示图片，确定你的标签是<img>还是<image>,确定你是网页不展示图片还是真机模拟不展示图片,请对应问题查找方法。 一、引用本地文件中存储的图片 (1)真机环境 (2)网页环境 二、引用localhost或者127的本地服务器图片 (1)真机环境 (2)网页环境 三、引用本地服务器开启的端口的图片 (1)真机环境 (2)网页环境 四、富文本...
微信小程序 rich-text 内图片显示不完整
weixin_44079209的博客
02-18 713
微信小程序 使用 字段 图片显示不完整解决。
微信小程序rich-text图片不显示及图片过大问题解决办法
BubbleABC的博客
05-06 819
js部分代码： that.setData({ // 文章内容图片不渲染因为图片是本地的，所以找不到 content: res.data.content .replace('/public', 'https://www.binzhiq.com/public') .replace('<img', '<img class="img"') .replace('style=""', 'style="display:block'),
rich-text 无法处理 文字 图片 视频超出视图显示不全的解决办法
weixin_68237499的博客
08-21 717
前端获取到后台数据 不做处理 就会出现下面问题 文字图片 视频超出视图显示不全
uniapp 输出html_uni-app渲染html字符串的方案，你会怎么选择？
weixin_39638468的博客
12-20 7494
uniapp语法：rich-text1、rich-text是uni-app的内置组件，提供了高性能的富文本渲染模式。2、API参考https://uniapp.dcloud.io/component/rich-text3、rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事情，无法对富文本中的图片、超链接单独设点击事件。(这个缺陷有点严重，因为这个缺陷，一般不建议使用，除非你的富...
uniapp富文本中使用网络图片无法展示问题
qq_33444716的博客
06-06 596
uniapp中app中展示pc端使用的富文本中若包含网络图片，展示不了问题
智慧医院智能导诊系统源码，智慧导诊小程序源码，采用前端框架：Uniapp+后端框架：springboot+移动端：微信小程序、H5自主研发
最新发布
baina666的博客
07-16 1183
智慧导诊系统是一种基于人工智能和大数据技术的医疗辅助系统，旨在提高患者的就医效率和医院的管理效率。以下是对智慧导诊系统的详细解析：定义与功能智慧导诊系统通过自然语言处理、机器学习等技术，自动分析患者的病情及伴随症状，并根据疾病类型和症状推荐合适的科室和医生，为患者提供精准的分诊服务。该系统能够帮助患者快速了解医院信息、科室布局、医生排班等情况，从而提高就医效率。
uni-app入门与环境搭建指南
HBuilderX是DCloud官方推荐的IDE（集成开发环境），它为uni-app提供了特别优化，提供了一站式开发体验。下载HBuilderX可以从官网链接：[https://www.dcloud.io/hbuilderx.html]...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值