uniapp vue v-html,显示富文本,内容img图片超出解决办法
uniapp h5中,v-html,img图片中style=width:auto;会显示图片原来的尺寸,会超出屏幕,替换成width:100%,这样就不会超出屏幕
重要的地方,例如<img src="https://cdn2.xxkucun.com/xxkucun/tuwen/20200904/1d959815-6a1c-4eb2-93b7-25ff3d6559eb?x-oss-process=style/xptw" data-ratio="1" alt="fca7c67836811c375a66e46fdcbc0ca5.gif" data-w="1" width="353" height="201" style="width: 353px; height: 201px;"/>这种,直接写死了width,height,这个是真的烦
正则太差,网上也没有找到合适的案例,只能自己用死办法解决了
/**
* 去除图片中的width属性,height属性
*
* @param img 图片字符串
* @return 返回去除后的字符串
*/
public static String replaceImgWidthHeight(String img) {
// 去掉width属性
String patternWidth = "width=\"\\d*\"";
Pattern r = Pattern.compile(patternWidth);
Matcher m = r.matcher(img);
while (m.find()) {
img = img.replace(m.group(), "");
}
// 去掉height属性
String patternHeight = "height=\"\\d*\"";
Pattern rh = Pattern.compile(patternHeight);
Matcher mh = rh.matcher(img);
while (mh.find()) {
img = img.replace(mh.group(), "");
}
// 替换style中的width属性
String styleWidth = "width:.*?px;";
Pattern sw = Pattern.compile(styleWidth);
Matcher swh = sw.matcher(img);
while (swh.find()) {
img = img.replace(swh.group(), "max-width:100%;");
}
// 替换style中的height属性
String styleHeight = "height:.*?px;";
Pattern sh = Pattern.compile(styleHeight);
Matcher shh = sh.matcher(img);
while (shh.find()) {
img = img.replace(shh.group(), "height:auto;");
}
return img;
}
/**
* 获取HTML代码中的img标签,并修改图片属性为自适应
* @param str HTML代码
* @return
*/
public static String replaceHtmlImgWidthHeight(String str) {
String rg = "<img.*?>";
Pattern compile = Pattern.compile(rg);
Matcher matcher = compile.matcher(str);
while (matcher.find()) {
String img = matcher.group();
str = str.replace(img, StringUtil.replaceImgWidthHeight(img));
}
return str;
}
搞了半天,终于解决了,看效果也确实自适应了,没有超过屏幕了,搞定之后发现有个好简单的办法,直接在view中设置样式style="width: 100%;overflow: hidden;"
<view style="width: 100%;overflow: hidden;" v-html="product.remark"></view>
超出部分直接隐藏好了,看供应商那边的App也是这样做的,有些图片只显示了一半,思路很重要啊,一行代码超出隐藏,一分钟解决了,结果写了半天的正则,正则还是太差了,唉
各位路过的大佬有更好的解决方案,欢迎评论区贴出,好让我学习学习
uniapp vue v-html,显示富文本,内容img图片超出解决办法的更多相关文章
- ueditor富文本编辑器跨域上传图片解决办法
在使用百度富文本编辑器上传图片的过程中,如果是有一台单独的图片服务器就需要将上传的图片放到图片服务器,比如在a.com的编辑器中上传图片,图片要保存到img.com,这就涉及到跨域上传图片,而在ued ...
- iOS swift 富文本显示 富文本在iOS中使用场景和解决方案
项目中很多地方都会用到富文本的内容:比如一般的商品详情,视频详情,资讯详情等,运营人员通过后台的富文本编辑器编辑的内容,前端拿到的就是一段富文本的字符串,这富文本大多都是图片和文字的组合.我们今天介绍 ...
- Android WebView 加载富文本内容
WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...
- wxParse解析富文本内容使点击图片可以选中并实现放大缩小
wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...
- PHP将富文本内容去除各类样式图片等只保留txt文本内容(作用于SEO的description)
1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...
- html处理富文本内容,避免XSS工具类
import org.apache.commons.lang3.StringEscapeUtils;import org.jsoup.Jsoup;import org.jsoup.safety.Whi ...
- 使用UIWebView中html标签显示富文本
使用UIWebView中html标签显示富文本 用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...
- Vue富文本编辑器(图片拖拽缩放)
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- 微信小程序富文本中的图片大小超出屏幕
这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi, '& ...
随机推荐
- 解决VS Code安装golang相关插件失败问题
解决VS Code安装golang相关插件失败问题 VSCode作为一款优秀的编辑器,基本上前端开发,Python,markdown都可以用,真正是开发过程中的好帮手,所以学习go也当仁不让的要用vs ...
- Ceph Luminous手动解决pg分布不均衡问题
原文链接: https://www.jianshu.com/p/afb6277dbfd6 1.设置集群仅支持 Luminous(或者L之后的)客户端 具体命令: ceph osd set-requir ...
- psutil 简单使用!
psutil.cpu_percent() cpu 百分比 mem = psutil.virtual_memory()mem.total,mem.used mem.free psutil.cpu_cou ...
- 问题定位 | Peronca Xtrabackup 8.0近日踩坑总结 - xtrabackup 2.4和8.0区别
目录 前言 适配过程中遇到的坑 xtrabackup 2.4和8.0区别 问题定位 坑一:MySQL 8.0 + Semi-Sync 重建问题 坑二:MySQL 8.0 + Group-Replica ...
- JAVA虚拟机故障诊断总结
一.JAVA运行时数据区 1.堆(-Xmx与-Xms):所有线程共享. 目的:用来存放对象实例.所有对象实例和数组都要在堆上分配内存.JAVA堆是垃圾收集器管理的主要区域 ...
- [HAOI2007]修筑绿化带 题解
题意分析 给出一个 $m*n$ 的矩阵 $A$ ,要求从中选出一个 $a*b$ 的矩阵 $B$ ,再从矩阵 $B$ 中选出一个 $c*d$ 的矩阵 $C$ ,要求矩阵 $B,C$ 的边界不能重合,求矩 ...
- 专为seo新手准备的百度分享工具教程
http://www.wocaoseo.com/thread-178-1-1.html 百度分享工具是目前seo站长最为常用的工具之一,主要用来让用户分享来提高网站的流量,同时他也有很多实际有效的方式 ...
- PHP 日期与时间函数详解
在开发过程中,我们经常碰到日期与时间戳相关的功能,今天趁此机会做个详细笔记. date_default_timezone_set('PRC'); /*把时间调到北京时间,php5默认为格林威治标准时间 ...
- Python超级码力在线编程大赛初赛题解
P1 三角魔法 描述小栖必须在一个三角形中才能施展魔法,现在他知道自己的坐标和三个点的坐标,他想知道他能否施展魔法 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后, ...
- 前端用vue怎么接收并导出文件
window.location.href = "excel地址" 如果是 get 请求,那直接换成 window.open(url) 就行了 创建一个隐藏的 iframe,把 if ...