微信小程序 rich-text img (vue uni-app的 v-html img ) 图片宽度超出最简便解决办法

因为项目上需要使用富文本，然后看了下小程序现在有个rich-text 组件可以使用富文本。待开发完成测试时候发现rich-text 对于图片无法限制最大宽度。在百度了一众方法后发现不太适合，最后以最简单的方式解决了此问题。

bug原因

在rich-text中，如果图片本身够大就会超出屏幕。出现类似下面这种情况：

查找资料

然后我就百度了一下看看，网上的解决办法大同小异：

网上各种解决方法核心思想就是在数据层把数据模板上的img数据加上style样式，使每个img标签达到想自己要的效果。

我的思考

这种方法基本解决的是string类型nodes数据的办法。因为如果是array的数据类型就需要一层层便利下去，一旦层级高数据量大的话运算量就有点大（当然不是说不可以啦）。

重新查看了官方文档，看到了这两句话：

全局支持 class 和style属性，不支持 id 属性。

tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

本来第一句是不太懂的，看到第二句的时候大概明白nodes中的标签数据受我们小程序样式控制。那么就好办了呀（搓手手）。

• 我的实践

首先给标签增加属性：

img {
	max-width:100%;
}

结果……居然无效。如果不支持element选择器的话那么尝试下其他的选择器，仔细观察img的标签内容思考其可以作为选择器的点：<img src='...' alt='' id='123' />
看了标签后打算使用属性选择器，使用的属性为img的描述属性alt，代码为：

[alt]{
	max-width:100%;
}

效果：

成了！

总结

最后有效代码就一段就解决了网上各种眼花缭乱的方案：

[alt]{
	max-width:100%;
}

补充

该方案也适用于vue、uni-app的v-html中的图片调整。可以在App.vue的style中加入（直接在页面中加入样式不生效，即使不加scoped）：
ps:这里直接使用标签选择器在web上是成功的，因为没测其他端的实际效果，所以这里多增加了几个选择器用来增强强壮性。

img,
[alt],
img[alt]{
  max-width: 100%;
}

最后

虽然这里用到的css功底不深，但是我还是想说一句：在这个各种ui库满天飞的时代，前端不止于JavaScript

原创不易，感谢看到这里，如果我的分享对你有帮助，点一个三连支持一下吧。