title: React Js getting Image from AWS s3 URL
body: <p>I have 7URL's out of which sometimes of 3-4 are valid downloadable Images.. so before rendering the Images using <strong>getPhotosList</strong> function I check the Valid download URL using function <strong>CheckValidImages</strong></p>
  <pre><code>const CheckValidImages = async () =&gt; {
  if (!props.location.state.isVideoContent) {
    let getRecipeDetailWorkflowRead = {props.location.state.recipeDetailWorkflowRead};
    let recipePhotos = [];
    let sequence = 0;
    for (var i = 0; i &lt; getRecipeDetailWorkflowRead.recipePhotos.length; i++) {
      const img = new Image();
      img.src = getRecipeDetailWorkflowRead.recipePhotos[i].path;
      await img
        .decode()
        .then(() =&gt; {
          getRecipeDetailWorkflowRead.recipePhotos[i].sequence = sequence + 1;
          recipePhotos.push(getRecipeDetailWorkflowRead.recipePhotos[i]);
          sequence = sequence + 1;
        })
        .catch((encodingError) =&gt; {});
    }
    getRecipeDetailWorkflowRead.recipePhotos = recipePhotos;
    setRecipeDetailWorkflowRead(getRecipeDetailWorkflowRead);
    setImageLoader(false);
  } else {
    setRecipeDetailWorkflowRead(
      props.location.state.recipeDetailWorkflowRead
    );
  }
  };
  
  const getPhotosList = () =&gt; {
  if (recipeDetailWorkflowRead.recipePhotos !== undefined) {
    console.log(recipeDetailWorkflowRead.recipePhotos);
    var listItems = recipeDetailWorkflowRead.recipePhotos.map((el, i) =&gt; {
      return (
        &lt;div
          key={i}
          className={['mr-1', Classes.imagediv].join(' ')}
          draggable='true'
          onDragEnd={dragEnd}
          onDragStart={dragStart}
          data-item={JSON.stringify(el)}
        &gt;
          &lt;img
            className={i === 0 ? Classes.card_img_first : Classes.card_img}
            src={el.path}
            alt='cardimg'
          /&gt;
          &lt;div className={Classes.card_body}&gt;
            &lt;input
              type='text'
              name='mediaDescription'
              value={el.mediaDescription || ''}
              onChange={(event) =&gt; onAltTextChangehandler(event, i)}
              placeholder='Alt text'
              className={['form-control', Classes.img_alt_text].join(' ')}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    });
    return (
      &lt;div
        onDragOver={dragOver}
        className={['d-flex', 'flex-row', Classes.contain].join(' ')}
      &gt;
        {listItems}
      &lt;/div&gt;
    );
  }
  };
  </code></pre>
  <p>In CheckValidImage function <strong>getRecipeDetailWorkflowRead.recipePhotos[i].path</strong> has an Image path which I check if its valid or not. Now if the image is valid I try push it in recipePhotos and finally after all images path are checked I update the state setRecipeDetailWorkflowRead</p>
  <p>But this seems much time consuming activity if the Image size is bigger. Can someone suggest any another alternate option where I can retrive the Images faster.</p>