RichText富文本组件里面的图片如何做lazy-load ?

[slxgsy]

这个特性解决了什么问题？

解决图文详情中的图片可以延迟加载，提升用户刚进入页面时渲染速度，也减少网络请求开销

这个 API 长什么样？

希望能支持传入lazy-load 参数，控制图片是否开启懒加载。

[Dunqing]

这个组件是小程序提供的吧

[slxgsy]

这个组件是小程序提供的吧

RichText组件是Taro自带的

[slxgsy]

测试通过html-react-parser 扩展，将Html解析出来，然后把img标签转成Taro的Image组件，在Image组件上设置lazyLoad属性是可以实现我这个需求。

但是产生了新的问题，把Html代码里Dom节点转化成View组件后，原有Html的很多不自动换行的节点(span,strong等)都会自动换行，显示效果全乱了，跟预期差别很大。

除了View组件外，Text组件又不能设置styel样式，还能使用其他组件吗？

1、引入扩展
import parse, {domToReact} from 'html-react-parser';

2、执行替换
parseStrToReact = (content) => {
const options = {
replace: ({type, name, attribs, children}) => {
if (type !== 'tag') {
return
}

    if (name=="img") {
       return ( <Image src={attribs['src']} className='rich_img' lazyLoad mode='widthFix' />)
    }else{
        return (<View style={attribs['style']}>{domToReact(children, options)}</View>)
    }
  }
};
  return parse(content,options)

};

3、显示渲染
return {this.parseStrToReact(content)}

[slxgsy]

已经解决了，对span,strong,br等标签特殊处理，转化成CSS样式。我的需求主要是图文，没有涉及视频和其他组件，目前看效果是正常的