React Js получает изображение с URL-адреса AWS s3

Question

У меня есть 7URL-адресов, из которых иногда 3-4 являются действительными загружаемыми изображениями.. поэтому перед визуализацией изображений с помощью функции getPhotosList я проверяю действительный URL-адрес загрузки с помощью функции CheckValidImages.

      const CheckValidImages = async () => {
if (!props.location.state.isVideoContent) {
  let getRecipeDetailWorkflowRead = {props.location.state.recipeDetailWorkflowRead};
  let recipePhotos = [];
  let sequence = 0;
  for (var i = 0; i < getRecipeDetailWorkflowRead.recipePhotos.length; i++) {
    const img = new Image();
    img.src = getRecipeDetailWorkflowRead.recipePhotos[i].path;
    await img
      .decode()
      .then(() => {
        getRecipeDetailWorkflowRead.recipePhotos[i].sequence = sequence + 1;
        recipePhotos.push(getRecipeDetailWorkflowRead.recipePhotos[i]);
        sequence = sequence + 1;
      })
      .catch((encodingError) => {});
  }
  getRecipeDetailWorkflowRead.recipePhotos = recipePhotos;
  setRecipeDetailWorkflowRead(getRecipeDetailWorkflowRead);
  setImageLoader(false);
} else {
  setRecipeDetailWorkflowRead(
    props.location.state.recipeDetailWorkflowRead
  );
}
};

const getPhotosList = () => {
if (recipeDetailWorkflowRead.recipePhotos !== undefined) {
  console.log(recipeDetailWorkflowRead.recipePhotos);
  var listItems = recipeDetailWorkflowRead.recipePhotos.map((el, i) => {
    return (
      <div
        key={i}
        className={['mr-1', Classes.imagediv].join(' ')}
        draggable='true'
        onDragEnd={dragEnd}
        onDragStart={dragStart}
        data-item={JSON.stringify(el)}
      >
        <img
          className={i === 0 ? Classes.card_img_first : Classes.card_img}
          src={el.path}
          alt='cardimg'
        />
        <div className={Classes.card_body}>
          <input
            type='text'
            name='mediaDescription'
            value={el.mediaDescription || ''}
            onChange={(event) => onAltTextChangehandler(event, i)}
            placeholder='Alt text'
            className={['form-control', Classes.img_alt_text].join(' ')}
          />
        </div>
      </div>
    );
  });
  return (
    <div
      onDragOver={dragOver}
      className={['d-flex', 'flex-row', Classes.contain].join(' ')}
    >
      {listItems}
    </div>
  );
}
};

В функции CheckValidImage getRecipeDetailWorkflowRead.recipePhotos[i].path есть путь к изображению, который я проверяю, является ли он действительным или нет. Теперь, если изображение допустимо, я пытаюсь вставить его в recipePhotos и, наконец, после проверки всех путей к изображениям, я обновляю состояние setRecipeDetailWorkflowRead.

Но это кажется трудоемким занятием, если размер изображения больше. Может ли кто-нибудь предложить какой-либо другой альтернативный вариант, где я могу быстрее получить изображения.

Answer 1

Я не знаю, как реагировать, но я думаю, что с помощью fetch вы можете выполнить запрос «HEAD» и проверить заголовки, не загружая содержимое: