Fetching image and reading body stream removed the preview from Chrome tab

Question

When fetching an image with the fetch API like so:

fetch("https://upload.wikimedia.org/wikipedia/commons/7/74/A-Cat.jpg")

The Chrome network tab will show a preview of the image:

When fetching an image with the fetch API and reading the body stream:

fetch("https://upload.wikimedia.org/wikipedia/commons/7/74/A-Cat.jpg")
  .then(r => r.blob());

The Chrome network tab will show a broken preview of the image:

I'm assuming this happens because Chrome can't read the body stream again and that makes sense. But is there a way to still show the preview correctly in the Chrome network tab? It's very useful for debugging.

Answer 1

Answering my own question here... (thank you Stackoverflow rubber duck)

Cloning the response fixes this.

fetch("https://upload.wikimedia.org/wikipedia/commons/7/74/A-Cat.jpg")
  .then(r => r.clone().blob());