标题小白一枚,主要看到微信小程序rich-text标签,在获取返回字段值是标签,从而进行查看。
使用步骤:
<rich-text nodes="{
{goodsInfo.useUrl}}"></rich-text>
goodsInfo.useUr就是后台返回的值,这里是一张图片,例如:
//在这里插入代码片
<img src="xxxxxxx" />
要在微信小程序上展示并且加入属性或者控制rich-text标签下的img标签的大小,浏览很多,有效的记录在下方:
使用正则验证添加类名和属性值:
goodsInfo.useUrl = goodsInfo.useUrl.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(class="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
.replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 ')
.replace(/\<img/gi, '<img class="rich-img" mode="widthFix"');
最后一行就是加入的类名或者属性
最后使用this.setData()方法即可
this.setData({
goodsInfo.useUrl:goodsInfo.useUrl
)}