react-lazyload不显示gif图像

Question

这里有一些与图像延迟加载相关的代码。

import LazyLoad from 'react-lazyload';

class SlickSliderWithImage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const Loading = <img src="/images/lazy.gif" />
        return (
            <LazyLoad placeholder={<Loading />}>
                <img src="example.jpg" data-src="example.jpg" className="lazyload" />
            </LazyLoad>

    }
}

它不显示lazy.gif文件。

Answer 1

class SlickSliderWithImage extends React.Component {
  render() {
    const Loading = (
      <img
        src="https://i.pinimg.com/originals/78/e8/26/78e826ca1b9351214dfdd5e47f7e2024.gif"
        alt="loader"
      />
    );
    return (
      <LazyLoad placeholder={Loading}>
        <img
          src="https://redbudpt.com/wp-content/uploads/2018/10/geometric-bg-2.png"
          data-src="https://redbudpt.com/wp-content/uploads/2018/10/geometric-bg-2.png"
          className="lazyload"
          alt="background"
        />
      </LazyLoad>
    );
  }
}

检查占位符，其变量不是组件。