title: How can I display the files pulled in from S3 on my frontend
body: <p>I have an image that was uploaded to S3 and I am now attempting to get the file stream and display the image on my frontend. I appear to have successfully accessed the image in my backend but keep having difficulties getting it to display on my frontend.</p>
  <p>Functions to get the file from S3:</p>
  <pre><code>    getFileStream: function getFileStream(fileKey){
          const downloadParams ={
              Key: fileKey,
              Bucket: bucketName
          }
          return s3.getObject(downloadParams).createReadStream();
      }
  </code></pre>
  <p>Post route uploading the image to S3 and implementing res.send to give the file a path on download:</p>
  <pre><code>router.post('/admin/create', upload.single('images'), async(req, res) =&gt; {
      try{
          const file = req.file;
          console.log(req.file);
          const result = await uploadFile(file);
          await unlinkFile(file.path);
          console.log(result);
          const newItem = await db.query(&quot;INSERT INTO collection (title, product, imagekey, price, info) values ($1, $2, $3, $4, $5) RETURNING *&quot;, [req.body.title, req.body.product, result.key, req.body.price, req.body.info]);
          res.send({imagePath: `/images/${result.key}`})
          res.status(201).json({
              status: &quot;success&quot;,
              results: newItem.rows.length,
              data:{
                  newItem: newItem.rows[0]
              }
          })
      }catch(err){
          console.log(err);
      }
  })
  </code></pre>
  <p>Get route for the image:</p>
  <pre><code>router.get(&quot;/images/:key&quot;, async (req, res) =&gt; {
      try{
          const key = req.params.key;
          const readStream = getFileStream(key);
          readStream.pipe(res);
      }catch(err){
          console.log(err);
      }
  })
  </code></pre>
  <p>The image key of every file uploaded is stored within my database along with the rest of the image's data. I created a function in my front end to map the correct &quot;src&quot; to every image so that the image would be displayed. (&quot;/images/${imagekey}&quot;)</p>
  <pre><code>    const imageURL = (imagekey) =&gt;{
          return(`/images/${imagekey}`);
      }
  </code></pre>
  <pre><code>    return(
          &lt;div&gt;
              &lt;div className=&quot;main-body&quot;&gt;
                  &lt;div className=&quot;collection-menu&quot;&gt;
                      {collection &amp;&amp; collection.map(item =&gt; {
                          return(
                                  &lt;div className=&quot;collection-item&quot;&gt;
                                      &lt;ImagesC classes=&quot;collection-thumbnail&quot; source={imageURL(item.imagekey)}/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          );
                      })}
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  </code></pre>
  <p>My image component:</p>
  <pre><code>const ImagesC = (props) =&gt; {
      return(
          &lt;div&gt;
              &lt;img className={props.classes} src={props.source}/&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>