From daadfd347f1f66a725c7f85cf5dbf284010ec8a1 Mon Sep 17 00:00:00 2001
From: stefanprobst <stefanprobst@kolabnow.com>
Date: Sat, 14 Aug 2021 00:03:20 +0200
Subject: [PATCH] Handle blob urls in image component (#27975)

This PR resurrects #23622 which has not been updated in a while. Makes the `Image` component handle `blob:` object urls.

closes #23622
fixes #19291

credits: @sdn90

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes
---
 packages/next/client/image.tsx                |  2 +-
 .../image-component/default/pages/blob.js     | 26 +++++++++++++++++++
 .../default/test/index.test.js                | 20 ++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 test/integration/image-component/default/pages/blob.js

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index d8f3a21ae8af..9608f3981ac0 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -343,7 +343,7 @@ export default function Image({
 
   let isLazy =
     !priority && (loading === 'lazy' || typeof loading === 'undefined')
-  if (src.startsWith('data:')) {
+  if (src.startsWith('data:') || src.startsWith('blob:')) {
     // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
     unoptimized = true
     isLazy = false
diff --git a/test/integration/image-component/default/pages/blob.js b/test/integration/image-component/default/pages/blob.js
new file mode 100644
index 000000000000..7fd386f30eaa
--- /dev/null
+++ b/test/integration/image-component/default/pages/blob.js
@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  const [src, setSrc] = useState()
+
+  useEffect(() => {
+    fetch('/test.jpg')
+      .then((res) => {
+        return res.blob()
+      })
+      .then((blob) => {
+        const url = URL.createObjectURL(blob)
+        setSrc(url)
+      })
+  }, [])
+
+  return (
+    <div>
+      <p>Blob URL</p>
+      {src ? <Image id="blob-image" src={src} width="10" height="10" /> : null}
+    </div>
+  )
+}
+
+export default Page
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index f2fbccb41328..aff13d076e6f 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -229,6 +229,26 @@ function runTests(mode) {
     }
   })
 
+  it('should work with image with blob src', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/blob')
+
+      await check(
+        () => browser.eval(`document.getElementById("blob-image").src`),
+        /^blob:/
+      )
+      await check(
+        () => browser.eval(`document.getElementById("blob-image").srcset`),
+        ''
+      )
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+
   it('should work when using flexbox', async () => {
     let browser
     try {