当前位置: 首页 > news >正文

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

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

<template><view><title-bar title="会员动态" back backcolor="#ffffff"></title-bar><view class="service-list"><view class="top"><!-- <view class="text1">{{result.title}}</view> --><view class="operate"><rich-text :nodes="result.content|formatRichText"></rich-text></view></view></view></view>
</template>
<script>onLoad(option) {this.id = JSON.parse(decodeURIComponent(option.detail));console.log(this.id,"传过来啥")this.getUser()},filters: {formatRichText (html) { //控制小程序中图片大小	let newContent= html.replace(/<img[^>]*>/gi,function(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,function(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;		}			}
</script>

http://www.lryc.cn/news/157419.html

相关文章:

  • 文件包含漏洞学习小结
  • 同时安装python2和3解决方案
  • 通过jr-qrcode生成二维码并下载到客户端本地(Vue)
  • 命令执行漏洞(附例题)
  • iOS开发Swift-类型转换
  • python基础爬虫反爬破解
  • Maven 必备技能:MAC 系统下 JDK和Maven 安装及环境变量配置详细讲解
  • electron笔记无边框窗口、DLL调用、DLL函数返回指针
  • 递归算法学习——黄金矿工,不同路径III
  • pg 创建分区表 --chatGpt
  • 长城网络靶场,第一题笔记
  • el-form表单中不同数据类型对应的时间格式化和校验规则
  • Python代码雨
  • java.util.Optional
  • 微服务--Seata(分布式事务)
  • 发光太阳聚光器的蒙特卡洛光线追踪研究(Matlab代码实现)
  • (涨知识)-圣诞灯串类产品出口都需要做哪些认证?
  • ROS地图/像素坐标描点调试【Python源码实现】
  • 2023年7月京东笔记本电脑行业品牌销售排行榜(京东数据平台)
  • 用户忠诚度:小程序积分商城的用户保持方法
  • [前端] 使用lerna version更新版本号
  • winform嵌入浏览器 webView2
  • stm32---用外部中断实现红外接收器
  • Filter过滤器及HttpServletRequest和HttpServletResponse
  • 02-打包代码与依赖
  • Kotlin(五) 循环语句
  • 数字孪生产品:数字化时代的变革引擎
  • 对接西部数据Western Digital EDI 系统
  • ClickHouse进阶(十):Clickhouse数据查询-4
  • FPGA原理与结构——FIFO IP核的使用与测试