产品呈现的问题:
braft-editor生成的htmlstring格局富文本内容，经由react中的dangerouslySetInnerHTML不做解决间接展现时，img的呈现会很突兀。
我最终的解决方案：
加载富文本内容时，图片优先申请了含糊版，起到了即刻占位的作用，随后富文本内容的图片清晰版通过filter动画逐步出现。
插件:
(1) htmr
感激简书https://www.jianshu.com/p/366...
提供的思路。这个插件能够适当自定义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;"}}相干局部的代码：
import htmr from "htmr";import ProgressiveImage from "react-progressive-image-loading";const transform = { _: (nodeName: any, props: any, children: any) => { if (nodeName == "img") { let itemSrc = props.src; let itemStyle = props.style; return ( <ProgressiveImage transitionTime={1800} preview={`${itemSrc}?op=thumb/fit/w/${ itemStyle.width / 24 || 40 }/h/${itemStyle.width / 24 || 40}`} src={itemSrc} render={(src, style) => ( <img src={src} style={Object.assign(style, { ...itemStyle, })} onError={(e: any) =>{ e.target.onerror = null; e.target.style = "filter:none;" }} /> )} /> ); } else if (typeof props === "undefined") { return <>{ nodeName }</>; } return React.createElement(nodeName, props, children); }, };……//渲染局部{htmr(某个htmlstring变量名, { transform })}题外话总结:
幸好工时足够，无意间组合出了百度能查到那则简书后果的关键词，因此破了局。此前，机械性的尝试了本人用原生js拿到htmlstring渲染后的dom进行操作。
（orz忍住没在摸索阶段就摆烂在v2ex发帖求助，本人找到了）