富文本生成的htmlstring在展示端进行图片loading预

产品出现的问题:

braft-editor生成的htmlstring格式富文本内容，经由react中的dangerouslySetInnerHTML不做处理直接展示时，img的出现会很突兀。

我最终的解决方案：

加载富文本内容时，图片优先请求了模糊版，起到了即刻占位的作用，随后富文本内容的图片清晰版通过filter动画逐渐呈现。

插件:

(1) htmr

感谢简书https://www.jianshu.com/p/36639da716e7提供的思路。这个插件可以适当自定义htmstring的实际渲染规则，比如把img替换成react组件。

【额外的】

需要下面的条件把文本内容直接返回，详见其npm的描述文档。

else if (typeof props === "undefined") {

    return <>{ nodeName };

}

(2) react-progressive-image-loading

一个图片渐进式模糊加载的插件，参见我上一则帖子www.v2ex.com/t/818727因为落实上述方案的项目，在图片资源方面，可以类似阿里云的OSS那样在图片地址后面加w/40/h/50这样的宽高参数获得指定尺寸图片，我再通过css放大成原图需要展示的大小便能获得模糊版。

【额外的】

如果图片404了，这个插件会保留filter: blur(10px);的样式，如果想替换或者移除，我给该插件render属性里的img加了这么一段

onError={(e: any) =>{

    e.target.onerror = null;

    e.target.style = "filter:none;"

}}

相关部分的代码：

题外话总结:幸好工时足够，无意间组合出了百度能查到那则简书结果的关键词，因而破了局。此前，机械性的尝试了自己用原生js拿到htmlstring渲染后的dom进行操作。（orz忍住没在探索阶段就摆烂在v2ex发帖求助，自己找到了）

---

[=============================更新]

我自己的项目后来发现有个唯一key报错没解决，问题定位到确实是htmr这个插件渲染出的内容有唯一key报错。

实在搞不定，现在就换成 html-react-parser 这个插件了

 html-react-parser  的渲染替换