Handle blob urls in image component

packages/next/client/image.tsx

@@ -348,6 +348,10 @@ export default function Image({
     unoptimized = true
     isLazy = false
   }
+  if (src.startsWith('blob:')) {
+    unoptimized = true
+    isLazy = false
+  }
   if (typeof window !== 'undefined' && loadedImageURLs.has(src)) {
     isLazy = false
   }

test/integration/image-component/basic/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

test/integration/image-component/basic/test/index.test.js

@@ -406,4 +406,20 @@ describe('Image Component Tests', () => {
       )
     })
   })
+  describe('Blob URL Tests', () => {
+    beforeAll(async () => {
+      browser = await webdriver(appPort, '/blob')
+    })
+    afterAll(async () => {
+      browser = null
+    })
+    it('should render image with blob src', async () => {
+      expect(
+        await browser.elementById('blob-image').getAttribute('src')
+      ).toMatch(/^blob:/)
+      expect(
+        await browser.elementById('blob-image').getAttribute('srcset')
+      ).toBeFalsy()
+    })
+  })
 })