javascript – 使用水合物而不是使用react-dom渲染时检测损坏的图像

我们在项目中使用来自react-dom的水合物,并且很难检测到破碎的图像链接.这些图像来自第三方API,因此我们无法预先知道哪些链接有效.

export default class Image extends PureComponent {
  render() {
    return (
      <img
        src={this.props.src}
        one rror={(e) => {  
          e.target.src='https://mycdn.com/fallback.jpg';
        }}
      />
    )
  }
}

如果我们使用render而不是hydrate,上面的代码可以工作.使用水合物时有没有办法检测破损的图像？

解决方法:

不幸的是,ReactDOM.hydrate没有附加onLoad或onError事件.

我能想到的最好的方法是做一种2遍渲染.从服务器,始终呈现回退(或占位符)图像.在客户端上,使用componentDidMount和state将图像的src更新为真实源.

export default class Image extends PureComponent {
  state = { isMounted: false }

  componentDidMount() {
    this.setState({ isMounted: true });
  }

  render() {
    return (
      <img
        src={ isMounted ? this.props.src : this.props.fallbackSrc }
        one rror={(e) => {  
          e.target.src = this.props.fallbackSrc;
        }}
      />
    );
  }
}

由于服务器不调用componentDidMount生命周期,因此它将始终呈现回退图像.

水合物完成并安装组件后,它将更新触发重新渲染的状态,然后使用来自道具的真实src.

标签：javascript,image,reactjs,react-dom
来源： https://codeday.me/bug/20190701/1346625.html