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, '& ...
随机推荐
- Quartz:基本用法总结
OpenSymphony所提供的Quartz是任务调度领域享誉盛名的开源框架.Spring提供了集成Quartz的功能,可以让开发人员以更面向Spring的方式创建基于Quartz的任务调度应用.任务 ...
- centos7 下安装生物信息软件的问题小总结
1.安装samtools与bwa时: 缺少zlib库 下载zlib库 cd zlib/ CFLAGS="-O3 -fPIC" ./configure make make insta ...
- Linux高频操作
常用linux命令 查看文件.文件夹大小 du -hs <file/dir> 同时输出到控制台和文件 ./<program> 2>&1 | tee <log ...
- IDEA run/debug configurations中没有配置tomcat选项
原文链接:https://blog.csdn.net/qq_41016818/article/details/80871738 原因分析 没有配置tomcat插件 解决方法如下: file->s ...
- 常被问到的八个 Java 面试题
想要找到一份好的工作,面试是少不了的,可能你觉得自己技术应该不错了,但是面试却是一团糟.下面我收集了八个常常被问到的Java面试题. 1. 阐述 Java 7 和 Java 8 的区别. 实话说, ...
- laravel+vue+vuetify 前端匹配不到数据记录 No matching records found
后端数据:使用guzzle获取api数据,(安装扩展包guzzle) use GuzzleHttp\Client; //获取请求远程产品信息需要的参数public function getParams ...
- Volatile关键字&&DCL单例模式,volatile 和 synchronized 的区别
Volatile 英文翻译:易变的.可变的.不稳定的. 一.volatile 定义及用法 多个线程的工作内存彼此独立,互不可见,线程启动的时候,虚拟机为每个内存分配一块工作内存,不仅包含了线程内部定义 ...
- 深入了解Netty【六】Netty工作原理
引言 前面学习了NIO与零拷贝.IO多路复用模型.Reactor主从模型. 服务器基于IO模型管理连接,获取输入数据,又基于线程模型,处理请求. 下面来学习Netty的具体应用. 1.Netty线程模 ...
- vue require.context自动化导入
语法: require.context(directory, useSubdirectories = false, regExp = /^.//); directory {String} -读取文件的 ...
- Agumaster漂亮起来了