title: Rendering Image Blob Correctly
body: <p>I'm trying to render an <code>&lt;img&gt;</code> from a blob.  </p>
  
  <pre><code>import React from 'react';
  import { getImageBlob } from '../api/images';
  
  class ImageViewer extends React.Component {
     state = {
       src: undefined,
       loading: true,
     }
  
    componentDidMount() {
      getImageBlob()
        .then((imageBlob) =&gt; {
          console.log(imageBlob);
          const urlCreator = window.URL || window.webkitURL;
          const imageUrl = urlCreator.createObjectURL(imageBlob);
          console.log(imageUrl);
          this.setState({ src: imageUrl, loading: false });
        })
        .catch((err) =&gt; {
          console.error(err);
          this.setState({ loading: false });
        });
    }
  
    render() {
      if (this.state.loading) {
        return 'loading';
      }
  
      return &lt;img src={this.state.src} height={100} width={100} /&gt;;
    }
  }
  
  
  export default ImageViewer;
  </code></pre>
  
  <p>The output of the first <code>console.log()</code> is something like:</p>
  
  <pre><code>Blob(5842218) {size: 5842218, type: "application/json"}
  </code></pre>
  
  <p>I think the <code>type</code> might be why it's not rendering, but I'm not sure. </p>
  
  <p>The output of the second <code>console.log()</code> is something like: </p>
  
  <pre><code>blob:http://localhost:3000/12bfba06-388d-48e2-8281-5ada40a662de
  </code></pre>
  
  <p>The <code>getImageBlob()</code> function is:</p>
  
  <pre><code>export const getImageBlob = () =&gt; new Promise((res, rej) =&gt; {
    client
      .get(`${IMAGES}`, {
        responseType: 'blob',
      })
      .then((resp) =&gt; {
        res(resp.data);
      })
      .catch((err) =&gt; {
        rej(Error(err.message));
      });
  });
  </code></pre>
  
  <p>It's possible the server is sending back something incorrectly, so I can post that code if necessary. </p>
  
  <h2>updated with server code</h2>
  
  <p>This is the code which sends back the image blob.</p>
  
  <pre><code>const getImage = (imageKey) =&gt; {
    const params = {
      Bucket: process.env.S3_BUCKET,
      Key: imageKey,
    };
  
    return new Promise((res, rej) =&gt; {
      s3.getObject(params, (err, data) =&gt; {
        if (err) {
          rej(Error(err.message));
        } else {
          console.log(data);
          res(data);
        }
      });
    });
  };
  </code></pre>
  
  <p>Output of <code>console.log()</code> on server side:</p>
  
  <pre><code>{ AcceptRanges: 'bytes',
    LastModified: 2018-08-18T18:07:39.000Z,
    ContentLength: 2101981,
    ETag: '"be594978d48fdc5964eb97ffb2c589f1"',
    ContentEncoding: 'blob',
    ContentType: 'image/jpg',
    Metadata: {},
    Body:
     &lt;Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 27 10 00 00 27 10 08 06 00 00 00 ba 4e 62 27 00 00 20 00 49 44 41 54 78 5e ec d0 01 0d 00 30 08 ... &gt; }
  </code></pre>