微信小程序rich-text图片大小显示不全

该博客主要展示了如何处理富文本中的图片标签,通过在`<img>`标签中添加样式,确保图片在滚动视图中自适应显示。在WXML中使用`<rich-text>`组件结合JS处理信息,将liveDesc中的`<img>`标签替换为带有宽度和高度自动调整样式的`<img>`标签,从而实现内容的正确展示。
摘要由CSDN通过智能技术生成

主要用到的关键词:

1.  liveDesc   

2.   result.liveDesc = result.liveDesc.replace(

          /\<img/gi,

          '<img style="width:100%;height:auto" '

        );

下面是详细代码

wxml:

<scroll-view scroll-y="true" style="height: 600rpx;" class="font24">

<rich-text nodes="{{info.liveDesc?info.liveDesc:'暂未设置介绍'}}"></rich-text>

</scroll-view>

index.js:

//发送请求

 getInfo(func) {

    let _this = this

    POST_UNLOAD('marketingLive/info', {

      liveId: _this.data.liveId,

      markCustCode: _this.data.markCustCode

    }, function (res, resCode) {

      let resul = res.data

      if (resCode == 200) {

        if (result.pushProduct) {

          result.pushProduct = _this.fenToYuan(result.pushProduct)

          result.pushProduct.totalSales = parseInt(result.pushProduct.realSales) + parseInt(result.pushProduct.virtualSales)

        } else {

          result.pushProduct = null

        }

        if (!result.pushMedal) {

          result.pushMedal = null

        }

        result.enterNum = parseInt(result.virtualEnterNum) + parseInt(result.rateEnterNum)

//最主要就是下面这步了  

        result.liveDesc = result.liveDesc.replace(

          /\<img/gi,

          '<img style="width:100%;height:auto" '

        );

        _this.setData({

          info: result,

        })

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值