Как обрабатывать состояние загрузки для фона изображения?

Question

Я отображаю массив изображений. Я хочу отобразить серый фон во время загрузки, фактическое изображение после выполнения обещания или изображение ошибки в случае сбоя процесса. Изображения извлекаются с сервера благодаря URL, указанному в объекте изображения.

Все изображения могут загружаться асинхронно. Как вернуть другой фон в зависимости от статуса завершения?

Мой код очень прост: imageList.map((image, i) => <Image picture={image.url} />

Я работаю с React.

Answer 1

Итак, я нашел следующий обходной путь с библиотекой lazyload, предложенный @ParthPatel:

    <Image
      width={width}
      style={{background: "#eee"}}
      height={height}
      data-src={image}
      onError={(e) => {
        (e.target as HTMLImageElement).src =
          "errorimg.jpg";
      }}
      className="lazyload"
    />