# Response: blob() method



The **`blob()`** method of the [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) interface takes
a [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) stream and reads it to completion. It returns a promise that
resolves with a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob).

## Syntax

```js-nolint
blob()
```

### Parameters

None.

> **NOTE:**
> If the [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) has a
> [Response.type](https://developer.mozilla.org/en-US/docs/Web/API/Response/type) of `"opaque"`, the resulting [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob)
> will have a [Blob.size](https://developer.mozilla.org/en-US/docs/Web/API/Blob/size) of `0` and a [Blob.type](https://developer.mozilla.org/en-US/docs/Web/API/Blob/type) of
> empty string `""`, which renders it _useless_ for methods like
> [URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static).

### Return value

A promise that resolves with a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) whose data is the body's bytes and the media type is the response's `Content-Type` header's value.

### Exceptions

- `AbortError` [DOMException](https://developer.mozilla.org/en-US/docs/Web/API/DOMException)
  - : The request was [aborted](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#canceling_a_request).
- [TypeError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError)
  - : Thrown for one of the following reasons:
    - The response body is [disturbed or locked](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#locked_and_disturbed_streams).
    - There was an error decoding the body content (for example, because the [Content-Encoding](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding) header is incorrect).

## Examples

In our [fetch request example](https://github.com/mdn/dom-examples/tree/main/fetch/fetch-request) (run [fetch request live](https://mdn.github.io/dom-examples/fetch/fetch-request/)), we
create a new request using the [Request()](https://developer.mozilla.org/en-US/docs/Web/API/Request/Request) constructor,
then use it to fetch a JPG. When the fetch is successful, we read a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob)
out of the response using `blob()`, put it into an object URL using
[URL.createObjectURL()](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static), and then set that URL as the source of an
[img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) element to display the image.

```js
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

## Browser compatibility

## See also

- [ServiceWorker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
- [HTTP access control (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS)
- [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)