Response: blob() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

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.

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.

Exceptions

DOMException AbortError

The request was aborted.

TypeError

Thrown for one of the following reasons:

The response body is disturbed or locked.
There was an error decoding the body content (for example, because the Content-Encoding header is incorrect).

Examples

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.

const myImage = document.querySelector("img");

const myRequest = new Request("flowers.jpg");

fetch(myRequest)
  .then((response) => response.blob())
  .then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });

Specifications

Specification
Fetch Standard # ref-for-dom-body-blob①

Browser compatibility

BCD tables only load in the browser