The blob() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with a Blob.


response.blob().then(function(myBlob) {
  // do something with myBlob



Note: If the Response has a Response.type of "opaque", the resulting Blob will have a Blob.size of 0 and a Blob.type of empty string "", which renders it useless for methods like URL.createObjectURL.

Return value

A promise that resolves with a Blob.


In our fetch request example (run fetch request live), we create a new request using the Request() constructor, then use it to fetch a JPG. When the fetch is successful, we read a Blob out of the response using blob(), put it into an object URL using URL.createObjectURL, and then set that URL as the source of an <img> element to display the image.

var myImage = document.querySelector('img');

var myRequest = new Request('flowers.jpg');

.then(response => response.blob())
.then(function(myBlob) {
  var objectURL = URL.createObjectURL(myBlob);
  myImage.src = objectURL;


Fetch Standard (Fetch)
# ref-for-dom-body-blob①

Browser compatibility

BCD tables only load in the browser

See also