ReactJS: Unable to render image in UI from REST API response

Question

I have built a REST API that returns an image and I am successfully getting its response through PostMan agent. In my React Code, I have this:

return fetch(url, sInit)
  .then((response) => {
    let blb = new Blob([response.body], { type: 'image/jpeg' });
    let fileUrl = (window.URL || window.webkitURL).createObjectURL(blb);
    window.open(fileUrl);
  })

The blob url generated does not have the image. What am I missing?

Fabian Schultz · Accepted Answer · 2017-07-27 12:07:16Z

1

You probably want to use the built-in blob() method by fetch:

fetch(
  'https://images.unsplash.com/35/SRkdurVYQFSFkMyHVwSu_spinnenweb-9536.jpg?dpr=2&auto=compress,format&fit=crop&w=376&h=251&q=80&cs=tinysrgb&crop='
)
  .then(res => res.blob())
  .then(blob => {
    let fileUrl = (window.URL || window.webkitURL).createObjectURL(blob);

    const img = document.createElement('img');
    img.src = fileUrl;
    document.querySelector('body').appendChild(img);
  });

answered Jul 27, 2017 at 12:07

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mainak chakraborty Over a year ago

Your answer is of great help, but this does not work in IE 8 through 11.

Fabian Schultz Over a year ago

Did you include a fetch polyfill? fetch is not supported by these browsers.

mainak chakraborty Over a year ago

Please check the documentation, fetch is supported in IE10 and above, but blob() is not supported in any version of Internet Explorer.

Collectives™ on Stack Overflow

ReactJS: Unable to render image in UI from REST API response

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related