问题

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>

图片显示不了解决

经过排查，发现，img标签是不能被figure标签括起来，否则，它解析不了，能解析的标签，在解析的标签和属性如下：https://uniapp.dcloud.io/component/rich-text

因此使用如下代码，解决了图片显示不了的问题：

text.replace(/<figure class="image">/g,"").replace(/<\/figure>/g,"")

问题1

上面问题解决之后，通过后台管理的富文本编辑，编辑文本之后，上传了一些大尺寸的图片，发现，在rich-text里头，这些图片展示不全，现象类似：

展示的尺寸：

实际的尺寸：

解决

最终通过给每个img标签设置宽度来解决问题，如下：

// 调用.replace替换方法
text.replace(/\<img/gi, '<img style=max-width:100%;height:auto')

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

【图文保存为图片并下载到相册】海报 h5，微信和 ios 不支持和用uniapp 微信小程序使用canvas把页面转为图片保存到手机
第一种,[图文保存为图片并下载到相册] h5, 微信和 ios 不支持 1,安装html2canvas npm install html2canvas --save 2,在需要的页面引入 import ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
解决微信小程序安卓手机访问不到图片，无法显示图片
关于微信小程序不显示图片通病可能有以下几个可能性: 非本地图片:确定图片资源存在,copy 图片url再浏览器打开,确定图片资源存在且能正常访问本地图片:确定相对路径或者绝对路径正确微信小程序图 ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
uniapp微信小程序服务器与行内img src图片路径拼接
uniapp微信小程序服务器与行内img src图片路径拼接 1.在main.js 在行内直接引入运行就可以连接到服务器的图片了
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
uniapp微信小程序项目-优购商城
原网页笔记文档: https://www.escook.cn/docs-uni-shop/ 1. 起步 #1.1 uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架 ...
uni-app微信小程序上传图片封装
概述 uni-app 微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示上传图标 c ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
uniapp 微信小程序分享海报
uniapp 微信小程序分享海报下面是一个Uniapp微信小程序分享海报的简单示例: 在Uniapp项目中创建一个新的页面,用于展示要分享的内容和生成海报.例如,我们可以在新页面中显示一张图片和一些 ...

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

问题

图片显示不了解决

问题1

解决

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

最新文章

热门文章