前言

用v-html渲染富文本框，发现小程序图片没有办法自适应
采用css去修改，发现不生效

img{width: 750upx!important;
}

解决办法

uni的v-html转换成小程序是rich-text标签，则我们直接使用rich-text来实现富文本的渲染

<rich-text :nodes="details.newsConten | filtersRichText"></rich-text>

我们使用过滤器来把img的标签拿出来，在放css样式

filters: {filtersRichText(html) { //控制小程序中图片大小let newContent = html.replace(/<img[^>]*>/gi, (match, capture)=>{match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');return match;});newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');return match;});newContent = newContent.replace(/<br[^>]*\/>/gi, '');newContent = newContent.replace(/\<img/gi,'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');return newContent;}
},

效果展示

补充

如果图片想展示自定义样式，那么我们可以不添加style，而改用class，在我们的css中加上class样式也可以

uni-app小程序图片v-html自适应问题相关推荐

uniapp 关于小程序图片高度不能自适应的问题[widthFix]
uniapp 关于小程序图片高度不能自适应的问题[widthFix] 小程序的 Image 图片实现宽度为100%或设置成某个rpx的值时,高度自适应要怎样设置? HTML 设置 mode=" ...
微信小程序图片按比例自适应显示
小程序的图片默认大小为320px*240px,有时候需求要显示多张图片(每张图片的规格不一致)自适应屏幕的宽,不失真.这时候你第一反应肯定是写:widht:100%;hegiht:auto;很遗憾地告 ...
uni.app小程序的ajax封装详细讲解
我懒得说了 //放url相同的片段 const rootUrl = ""// 示例: ajax({ url:'/api/login', param: param, method: ...
uni.app小程序登录页持久化存储和退出后清除本地缓存
持久化存储在store里面的user.js(自己创建的)中 export default {state: {status: false, //登录的状态,获取数据中status是1,登录成功时状态为 ...
uni.app小程序失焦聚焦，表单验证
<input type="text" placeholder="请输入手机号/邮箱/账号" v-model="username" @f ...
uni.app小程序实现跳转获取数据
式例如上图所示 (前提是点击索引获得的id与获得数据的id是一样的) 首先是获取文档的数据我用的async await来获取数据,也可以用.then方法获取数据 async onLoad() {le ...
小程序图片高度自适应等问题
小程序图片高度自适应这里踩了很多遍的坑,花了很多时间,以为像以前以前给他上级的盒子不给高度就行了,oh,no,这是一个坑,关键在于image标签的一个属性:mode="widthFix&q ...
小程序图片自适应宽高，保持图片比例不变
小程序图片自适应宽高,保持图片比例不变小程序中,可根据需求给image设置 mode属性来控制图片的裁剪.缩放模式如果要保持图片在容器内不变形可设置mode属性为aspectFit 代码如下: / ...
uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端完美兼容 H5 App 小程序，最好用的图片上传后裁剪插件教程源代码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,而且很难. 实现了完美兼容 H5 App 小程序,选取手机本地相册或拍照,图片上传裁切内置多种方案,样式随便改, 本文代码干 ...

uni-app小程序图片v-html自适应问题

自适应

前言

解决办法

效果展示

补充

uni-app小程序图片v-html自适应问题相关推荐

最新文章

热门文章