小程序富文本显示图片

最新推荐文章于 2024-08-08 08:18:22 发布

Acitylion

最新推荐文章于 2024-08-08 08:18:22 发布

阅读量1.1k

点赞数

分类专栏：小程序工作中遇到的问题小程序

本文链接：https://blog.csdn.net/Acitylion/article/details/108073588

版权

小程序同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

小程序工作中遇到的问题

17 篇文章 0 订阅

订阅专栏

小程序中很多项目都会有文章详情的内容

会用到富文本编辑器，小程序提供的方法是https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

接口返回的图片需要设置个样式让图片的宽100%；

 var id = options.id;
    var that = this;
    wx.request({
      url: api.EnvironmentalNotificationDetails,
      method:"POST",
      data:{
        id:id
      },
      success:function(res){
        let shi = res.data.data.content
        shi = shi.replace(/<img/gi, '<img style="width:100%;height:auto" ')
        that.setData({
          content:res.data.data,
          shi: shi
        })
      
      },
      fail:function(res){

      }
    })

<view class="section">
	<view class="title">{{content.title}}</view>
	<view class="date">{{content.updatetime}}</view>
	<!-- <view class="content">
		{{content.content}}
	</view> -->
	<rich-text class="content" nodes="{{shi}}"></rich-text>
</view>