uniapp解决rich-text 富文本图片过大超出问题

2023-11-17

问题

如图所示,图片过大超出会超出手机屏幕:
Alt

解决办法

<rich-text preview image-menu-prevent class="hh" :nodes="content"></rich-text>

onLoad(options) {
	this.index = options.index
	if(options.detailList) {
		this.dataList = JSON.parse(decodeURIComponent(options.detailList))
		//解决图片不自动适应的问题 this.dataList.content是富文本展示的数据
	    var richtext=  this.dataList.content;
		const regex = new RegExp('<img', 'gi');
		richtext= richtext.replace(regex, `<img style="max-width: 100%;"`)
		this.content = richtext;
	}
	console.log(this.dataList);
	},
      
.hh { //解决数字内容太多不换行的问题
	word-break: break-all;
	white-space: pre-warp;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp解决rich-text 富文本图片过大超出问题 的相关文章

随机推荐

  • Web自动化元素定位

    元素定位就是通过元素的信息或元素层级结构来定位元素 要使用Web自动化操作元素 必须首先找到此元素 1 元素定位方式 1 1 基于元素属性特有的定位方式 1 id element driver find element by id id i
  • Python入门习题(91)——OpenJudge百练习题:汉诺塔问题

    OpenJudge百练第4147号习题 汉诺塔问题 题目描述 解题思路 参考答案 测试用例 小结 题目描述 来源 OpenJudge网站 百练习题集 第4147号习题 要求 总时间限制 1000ms 内存限制 65536kB 描述 一 汉诺
  • 猎聘发布《2019年中国5G人才需求大数据报告》

    在今年2月于西班牙巴塞罗那举办的2019世界移动通信大会上 华为 小米 vivo等中国企业先后扎堆发布了自己的5G手机 更加凸现了本次大会 5G商用产品 这一亮点 与此同时 5G成为大众新的关注焦点 借此契机 中高端人才职业发展平台猎聘推出
  • OVAL学习笔记

    很多其它好文章 http blog csdn net aap159951 article details 51131937 OVAL由MITRE公司开发 是一种用来定义检查项 脆弱点等技术细节的一种描写叙述语言 OVAL相同使用标准的XML
  • Android图片设置点击事件,Android EditText中插入图片并响应点击事件

    import android os Bundle import android app Activity import android content Context import android util Log import andro
  • 第3章 R语言编程基础——基于R软件的传统计算(超详细)

    3 1 统计分析 多元统计分析常用的 R 包和函数 3 1 1 多元回归分析 随机误差 计量模型 案例分析 M2 的建模与预测 残差的五数 估计参数的回归值 标准差 t检验量 p value 单变量显著性检验 拟合优度和 F 检验 Resi
  • bnu1331 赈灾捐款 C语言版

    北京师范大学珠海分校 Judge Online of ACM ICPC 1331 赈灾捐款 C语言版 include
  • ubuntu18.04下的mysql创建表

    ubuntu18 04下的mysql创建表 MySQL创建数据表 错误排查 出现报错 百度的解决思路 实际操作 MySQL创建数据表 删除表 drop table h data 创建表 CREATE TABLE IF NOT EXISTS
  • 第9章、图像按钮ImageButton(从零开始学Android)

    在Android App应用中 默认的Button按钮尽管我们可以通过样式变成圆角 但有时感觉仍然不够美观 我们可以通过采用图像按钮ImageButton改善这种现状 今天我们就一起学习一下图像按钮的使用 知识点 图像按钮ImageButt
  • 【数据结构课设】 浮点数计算器

    一 简介 1 功能介绍 实数的计算 支持取对数 幂次 开方及加减乘除运算 2 模块设计 1 菜单界面 2 计算器功能简介 3 计算器功能实现 3 计算器功能实现方法 1 字符串读入用户的表达式 2 处理字符串 包括提取实数以及中缀转后缀 维
  • idea开发中git合并的代码,

    方法一 将master主分支 合并到 子分支dev上 1 当前如果在dev分支上 先提交dev分支的代码到本地 然后推送到服务器 2 然后切换分支到master主分支上 先更新master主分支的代码到本地 然后主分支就是最新代码了 3 再
  • python 安卓模拟点击_Android后台模拟点击探索(附源码)

    工作中我们需要自制一套工具 其中遇到需要模拟点击事件的需求 类似按键精灵的功能 支持后台持续运行 满足触发条件时完成点击 经过一番探索 一共整理出两种不同的方案 AccessibilityService 和 adb shell命令 读者可自
  • Matlab中的c2d函数离散化

    把传递函数离散化 dsys c2d sys ts method 传函离散 num den tfdata dsys v 离散后提取分子分母 这里面的method有好多种 zoh 零阶保持 假设控制输入在采样周期内为常值 为默认值 foh 一阶
  • 【自动化测试】——robotframework实战(一)搭建环境

    一 前提准备 python 3 9 6 pip 下载 最新版本 setuptools 下载 最新版本 二 下载robotframework框架 管理员模式打开cmd 下载RF pip install robotframework 3 1 下
  • tomcat 配置域名

    Tomcat 配置域名 在windows中 首先找到conf下面的server xml 把Connector 标签中的端口改成80 然后把添加一个Host name为域名appBase为路径 如下 Engine 标签也是 最后在C盘 win
  • Android网络请求库的使用(okhttp、retrofit、rxjava)

    Android网络请求库的使用 前置工作 okhttp的基本使用 okhttp第一个demo okhttp的异步写法 更常见 GET请求中使用okhttp拼接参数 okhttp发起POST请求 拦截器第一个demo 打印请求的时间 retr
  • java并发编程实战

    Volatile变量 valatile是java提供的一种稍弱的同步机制 用来确保将变量的更新操作通知到其他线程 当把变量声明为volatile后 编译器与运行时都会注意到这个变量是共享的 因此不会将变量上的操作与其他内存操作一起重排序 1
  • 评测 AlibabaCloud 阿里云国际版 香港轻量云服务器的性能和网络怎么样

    此次站长带来的是 AlibabaCloud 阿里云国际版 香港轻量云服务器的评测 配置为512M内存 1核 20G云硬盘 官方网站 https www alibabacloud com 国际版 https www aliyun com 国内
  • AST混淆 二进制/八进制/十六进制数值及十六进制字符串,Unicode字符串还原

    二进制 八进制 十六进制数值及十六进制字符串 Unicode字符串还原插件 const simplifyLiteral NumericLiteral node if node extra 0 obx i test node extra ra
  • uniapp解决rich-text 富文本图片过大超出问题

    问题 如图所示 图片过大超出会超出手机屏幕 解决办法