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

背景：

本地做微信小程序项目，后台通过富文本编辑器编辑内容，在小程序页面展示时使用rich-text遇到了图片不能展示和图片尺寸过大的问题。

问题一：富文本编辑器中的图片无法展示

<rich-text nodes="{{content}}"></rich-text>

分析原因：照上面写法输出富文本内容，图片加载失败，查看图片路径，发现路径错误

解决方案：
content中的图片地址必须为网络地址，后台可做处理，如下

$info['content'] = str_replace('/Uploads',"http://www.***.cn/Uploads",$info['content']);

问题二：图片宽度超出容器

解决方案一：接口中给img加标签（php）

$info['content'] = str_replace("<img ", "<img style='max-width:100%;height:auto;'", $info['content']);

解决方案二：微信小程序js文件中给img加标签

that.setData({content: res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')})

或

that.setData({content: res.data.contents.replace('<img ', '<img style="max-width:100%;height:auto"')})

微信小程序rich-text富文本图片相关推荐

微信小程序 - 解决 rich-text 富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控）
前言注意:您无法通过直接指定 <img> 标签样式来试图设置为自适应图片. 使用官方 <rich-text> 富文本组件解析时, 当内容包含图片(大图)时显示的结果就会超出屏 ...
微信小程序：rich-text 富文本中图片自适应
/*** 处理富文本里的图片宽度自适应* 1.去掉img标签里的style.width.height属性* 2.img标签添加style属性:max-width:100%;height:auto* 3 ...
微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述仔细看报错,我们会发现是wxParse.js ...
微信小程序如何显示富文本，类似v-html，rich-text
一.微信小程序需求,有一段富文本字符串需要解析并展示在页面上: 结构如下 :content 二.解决办法一.用过vue 的都知道vue 有个 v-html 属性,可以准换html格式并且展示: 但是 ...
微信小程序解析html富文本插件wxparse的使用
第一步:下载把wxparse文件放到根目录下第二步:引入<import src="../../wxParse/wxParse.wxml"/> 在xx.wxml页面 ...
微信小程序显示HTML富文本
效果图上面是转化后的,下面是后台获取的HTML标签下载wxParse文件 git地址:https://github.com/icindy/wxParse 找到 wxParse 文件夹复制到你的项 ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
微信html字体颜色代码,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...

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

背景：

问题一：富文本编辑器中的图片无法展示

问题二：图片宽度超出容器

微信小程序rich-text富文本图片相关推荐

最新文章

热门文章