微信小程序rich-text图片不显示及图片过大问题解决办法

最新推荐文章于 2024-08-20 16:51:14 发布

原创

最新推荐文章于 2024-08-20 16:51:14 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #css #javascript #前端

本文探讨了在微信小程序中使用rich-text组件时遇到的图片不显示和图片过大问题，通过提供js和css代码示例，指导如何解决这些问题。同时，建议读者参考评论区获取更多解决方案。

js部分代码：

that.setData({
   
   
  // 文章内容图片不渲染因为图片是本地的，所以找不到
  content: res.data.content
          .replace('/public', 'https://www.binzhiq.com/public')
          .replace('<img',

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

钟Bubble

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

微信小程序 服务端返回富文本，图片无法显示

qq_36158551的博客

11-25

1497

微信小程序开发中，需要从服务端拿取数据渲染到页面上，后台返回的富文本里，图片路径有时是没有带域名前缀的，导致图片无法正常显示。

小程序后台返回富文本，图片无法显示

weixin_45455635的博客

11-06

938

小程序后台返回富文本，图片无法显示

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

钟Bubble 2021.05.06
[code=css] .img{ /* display: block; */ max-width: 100%; max-height: 400rpx; } [/code] 这是我最后的样式

微信小程序 rich-text 标签图片宽度超出屏幕自适应的方法

前端路上坎坎坷坷，总有一天站在顶峰仰望世界！！！

03-21

569

解决rich-text标签里面图片自适应代码。

微信小程序rich-text富文本图片不展示、宽度超出

最新发布

10-13

综上所述，`rich-text`组件是微信小程序实现复杂富文本内容展示的核心工具之一。它通过灵活的数据结构支持多种类型的文本显示需求。在实际开发中，开发者可以根据具体场景选择合适的节点类型和数据格式，以达到最佳...

微信小程序 rich-text 内图片显示不完整

weixin_44079209的博客

02-18

961

微信小程序 使用字段图片显示不完整解决。

微信小程序 rich-text的使用方法

08-29

在微信小程序中，`<rich-text>`组件是一个用于渲染富文本的组件，...总之，`<rich-text>`组件是微信小程序中处理富文本内容的重要工具，通过理解和熟练运用其属性和规则，可以创建出丰富多样的页面布局和内容展示效果。

微信小程序rich-text，图片展示溢出，替换样式自适应

简单发点工作中用到的，或者记录下小知识点

07-06

1279

图片展示溢出，替换成自适应，width:100%,也可以替换成其它的需要展示在页面的数据调用上面的方法，即可得到替换后的代码，直接在rich-text中展示即可

rich-text解析图片在开发者工具能显示，但真机不显示

前端菜菜DayDayUp的博客

03-14

3162

第一：图片路径问题最近在做项目的时候，小程序（uni-app）遇到一个问题，rich-text解析本地图片（相对路径）在开发者工具中能显示，但是在真机调试或者发行上线在手机上查看不显示图片，但是也查阅的很多大佬的文档，寻找解决方法；方法一（本人行不通）有些大佬是建议使用绝对路径，比如相对路径（../../img/nan.png）----> 绝对路径（/img/nan.png）,这种方法亲测无效（仅是自己观点，各位大佬可以在调研一下）。方法二（将图片转化为base64格式）--亲测有效

uniapp微信小程序rich-text图片显示不全图片显示不了

wltsysterm的博客

04-18

4779

问题 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> 图片显

uniapp踩坑之: rich-text组件富文本内容中图片加载失败

m0_63085629的博客

08-20

1690

分享uniapp富文本内容图片加载失败的优化方法

关于小程序rich-text组件（不支持视频节点、图片显示问题）

gmy00111的博客

05-06

1378

项目中遇到问题，后台配置富文本内容，小程序渲染的时候出现图片显示问题和视频节点不显示，排查过程中发现图片显示没问题，返回数据就是这么大的尺寸，那就是怎么适配了（下面直接上代码），视频节点不显示问题，看了下微信文档，这个组件是不支持vedio标签的，说了这么多直接上代码吧！

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

qq_36557846的博客

03-28

538

问题描述 <rich-text :nodes="content" style="font-size: 30rpx;"></rich-text> 图片不显示原因 解决办法 修改manifest.json中的路由 "router" : { "mode" : "hash", "base":"" }, 重新启动项目

在nvue中富文本rich-text不显示和图片不显示的解决

weixin_45979310的博客

02-18

3015

uniapp开发中，使用nvue方式，富文本及图片不展示的办法

uniapp小程序中富文本内容渲染图片不展示的问题

LQlove1的博客

07-27

1287

uniapp小程序中富文本内容渲染图片不展示的问题

uni-app rich-text组件富文本图片展示不全问题

xiaoyun888_的博客

09-07

1473

背景：php+fastadmin+富文本插件上传富文本内容到数据库，uni-app渲染富文本内容。这里后端不需要特殊处理。uni-app的rich-text组件展示图片跑板。

微信小程序rich-text富文本图片

这不是我的博客

12-24

5369

背景：本地做微信小程序项目，后台通过富文本编辑器编辑内容，在小程序页面展示时使用rich-text遇到了图片不能展示和图片尺寸过大的问题。问题一：富文本编辑器中的图片无法展示 <rich-text nodes="{{content}}"></rich-text> 分析原因：照上面写法输出富文本内容，图片加载失败，查看图片路径，发现路径错误解决方案...

关于微信小程序背景图片超过40kb无法显示的问题解决方法

chenfangqi7的博客

10-17

1515

前两天在做微信小程序时有一个<view>需要设置背景图片，使用UI给的背景图片发现无法生效，百度后才得知微信小程序规定背景图片不能超过40kb。使用方法：background:(url("xxx"));xxx为转换后的base64格式图片。base64格式会有很长一串代码，一定程度影响代码美观。3：将图片转换为base64格式进行使用；2：压缩以下图片使其在40kb以内；1：使用网络链接引入图片；

微信小程序rich-text图片点击放大实现方案

本文围绕“微信小程序 rich-text 图片放大”这一核心功能展开深入探讨，详细解析如何通过前端逻辑实现用户点击 rich-text 中的图片后进行放大预览的技术方案。该技术不仅提升了用户体验，也增强了小程序在图文展示类...