微信小程序 rich-text 富文本图片自适应

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 rich-text 富文本图片自适应相关的知识,希望对你有一定的参考价值。

参考技术A <p :class="item.isMore == true ? 'richText' : 'minH'" v-if="isShow"

v-html="contentConv(item.storyContent)">

</p>

直接在css中加max-width:100%;height:auto; 。没有生效

 方式一:在style中追加 max-width:100%;height:auto; ,此方法优点灵活,对于content中所有图片都起作用

// 文章html正则追加max-width

contentConv(content)

return content.replace(/<(img).*?(\/>|<\/img>)/g, function(mats)

if (mats.indexOf('style') < 0)

return mats.replace(/<\s*img/, '<img style="max-width:100%;height:auto;"');

else

return mats.replace(/style=("|')/, 'style=$1max-width:100%;height:auto;')



);

,

方式二:此方法会破坏图片设置的样式,再设置style="max-width:100%;height:auto;"

contentConv(content)

    return content.replace(/<img[^>]*>/gi, function (match, capture)

      return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="max-width:100%;height:auto;"') // 替换style

    );

微信小程序|组件-富文本rich-text

1. 效果图

2. wxml代码

<!-- rich-text富文本,可渲染html -->
<view class="page-body">
  <view class="page-section">
    <view class="page-section-title">传入html字符串</view>
    <view class="rich-text-wrp">
      <rich-text nodes="html" bindtap="tap"></rich-text>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">传入节点列表</view>
    <view class="rich-text-wrp">
      <rich-text nodes="nodes" bindtap="tap"></rich-text>
    </view>
  </view>
</view>

3. js代码

Page(
  data: 
    html: '<div class="div_class" style="line-height: 60px; color: red;">Hello&nbsp;World!</div>',
    nodes: [
      name: 'div',
      attrs: 
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      ,
      children: [
        type: 'text',
        text: 'Hello&nbsp;World!'
      ]
    ]
  ,
  tap() 
    console.log('tap')
  
)

 

以上是关于微信小程序 rich-text 富文本图片自适应的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序 富文本 rich-text组件

微信小程序|组件-富文本rich-text

微信小程序|组件-富文本rich-text

微信小程序富文本rich-text使用详解-微信小程序系统学习攻略

微信小程序富文本rich-text使用详解-微信小程序系统学习攻略

微信小程序的rich-text(富文本)添加样式