response-lazyload не показывает изображение в формате GIF

Question

Вот некоторые коды, связанные с отложенной загрузкой изображения в react.

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>
    );
  }
}

Убедитесь, что переменная вашего заполнителя не является компонентом.