Предварительная загрузка изображений из URL React

Question

Я получаю список URL-адресов изображений из API и отображаю их 1 на 1 в карусели. Я делаю <img src={url} />. Но с этим решением мои изображения всегда должны загружаться, когда они появляются. Затем я хочу предварительно загрузить их в ComponentDidMount сразу после моего вызова API. Может быть, что-то вроде «запаса» их.

Ниже метода я тоже пробую, но он не работает

.then(result => {
  result.forEach(element => {
      const image = element.image.fileName;
      element.image = new Image();
      element.image.src = image;
  });
  console.log(result)

  this.setState({loading: false, error: null, partners: result});
})

Заранее спасибо

РЕДАКТИРОВАТЬ: скриншот с кодом, который я пишу до того, как получу этот результат, и если написать <img src={url}, мое изображение загружается за несколько миллисекунд. И убить пользовательский опыт. На первом изображении ниже вы можете увидеть массив. С изображением в изображении, и если я нажимаю на изображение, у меня появляется предупреждение, которое я показываю на втором скриншоте.

Answer 1

Я думаю, что вам не хватает прослушивания события onload. В основном вы можете подождать, пока все ваши изображения будут загружены. Тем временем вы можете показать загрузочный счетчик.

Пример кода в ComponentDidMount():

    // Load all images
    const images = await myAPICall().map(image => new Promise((rs, rj) => {
     const img = new Image();
     img.onload = () => rs(img);
     img.onerror = () => rj();
    }))

  await Promise.all(images)
  this.setState({loading: false})

Затем вы можете отрендерить свою карусель, просто проверив, завершена ли загрузка.

PS: здесь я использую async / await, поэтому убедитесь, что вы пытаетесь / ловить и добавляете async перед функцией.