如何在内联样式属性（React）中加载背景图像？

Question

我正在制作我的第一个React应用程序，而且我面临着一些艰难的事情（对我来说）。

<div
    className="container-fluid"
    id="cityDetail"
    style={{
        backgroundImage: `url(${camera.lastPhoto})`,
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        backgroundSize: "cover",
        height: "100vh"
    }}
>

我想懒加载backgroundImage。

我没有找到这样做的好组件/实用程序。有人对此有所了解吗？

谢谢！

Answer 1

这是延迟加载图像的简单组件：

class LazyBackground extends React.Component {
  state = { src: null };

  componentDidMount() {
    const { src } = this.props;

    const imageLoader = new Image();
    imageLoader.src = src;

    imageLoader.onload = () => {
      this.setState({ src });
    };
  }

  render() {
    return <div {...this.props} style={{ backgroundImage: `url(${this.state.src || this.props.placeholder})` }} />;
  }
}

你可以用<LazyBackground src='path/to/hd.jpg' placeholder='path/to/placeholder.jpg' />来称呼它