6

I'm trying to render an <img> from a blob.

import React from 'react';
import { getImageBlob } from '../api/images';

class ImageViewer extends React.Component {
   state = {
     src: undefined,
     loading: true,
   }

  componentDidMount() {
    getImageBlob()
      .then((imageBlob) => {
        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) => {
        console.error(err);
        this.setState({ loading: false });
      });
  }

  render() {
    if (this.state.loading) {
      return 'loading';
    }

    return <img src={this.state.src} height={100} width={100} />;
  }
}


export default ImageViewer;

The output of the first console.log() is something like:

Blob(5842218) {size: 5842218, type: "application/json"}

I think the type might be why it's not rendering, but I'm not sure.

The output of the second console.log() is something like:

blob:http://localhost:3000/12bfba06-388d-48e2-8281-5ada40a662de

The getImageBlob() function is:

export const getImageBlob = () => new Promise((res, rej) => {
  client
    .get(`${IMAGES}`, {
      responseType: 'blob',
    })
    .then((resp) => {
      res(resp.data);
    })
    .catch((err) => {
      rej(Error(err.message));
    });
});

It's possible the server is sending back something incorrectly, so I can post that code if necessary.

updated with server code

This is the code which sends back the image blob.

const getImage = (imageKey) => {
  const params = {
    Bucket: process.env.S3_BUCKET,
    Key: imageKey,
  };

  return new Promise((res, rej) => {
    s3.getObject(params, (err, data) => {
      if (err) {
        rej(Error(err.message));
      } else {
        console.log(data);
        res(data);
      }
    });
  });
};

Output of console.log() on server side:

{ AcceptRanges: 'bytes',
  LastModified: 2018-08-18T18:07:39.000Z,
  ContentLength: 2101981,
  ETag: '"be594978d48fdc5964eb97ffb2c589f1"',
  ContentEncoding: 'blob',
  ContentType: 'image/jpg',
  Metadata: {},
  Body:
   <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 ... > }
14
  • The issue is your content type. From the size of the blob it is clear that the server is doing its part properly, it is just that your client side is having issues. I believe this duplicate solves the issue of serving an image.
    – Travis J
    Commented Aug 18, 2018 at 18:55
  • Thanks for the comment. So, is responseType: 'blob' not the correct way to set the content type? Commented Aug 18, 2018 at 18:57
  • @TravisJ The question you linked seems to deal solely with Node.js unless I'm missing something? Commented Aug 18, 2018 at 18:59
  • It does primarily aim at Node.js (which you tagged here as well), however the primary reason I linked that duplicate is because responseType is not the correct way to set the content type, you need to indicate the contentType in the request header, which the duplicate covers.
    – Travis J
    Commented Aug 18, 2018 at 19:37
  • Setting the contentType to image/jpeg in the getImageBlob() doesn't seem to work. Should it be set to application/json? Commented Aug 18, 2018 at 19:39

1 Answer 1

0

I think it's that instead of Blob(5842218) {size: 5842218, type: "application/json"} is Blob(5842218) {size: 5842218, type: "image/jpeg"} change the type

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.