uniapp vue v-html,显示富文本,内容img图片超出解决办法

时间:2024-10-15 14:36:38

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也是这样做的,有些图片只显示了一半,思路很重要啊,一行代码超出隐藏,一分钟解决了,结果写了半天的正则,正则还是太差了,唉
各位路过的大佬有更好的解决方案,欢迎评论区贴出,好让我学习学习