Fix onLoadingComplete() callback when image src is Data URL (#29367)

Fixes #29363 ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added
vercel · Sep 26, 2021 · 2271cd8 · 2271cd8
1 parent f0eb928
commit 2271cd8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -10,6 +10,8 @@ import {
 import { useIntersection } from './use-intersection'
 
 const loadedImageURLs = new Set<string>()
+const emptyDataURL =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
 
 if (typeof window === 'undefined') {
   ;(global as any).__NEXT_IMAGE_IMPORTED = true
@@ -254,7 +256,7 @@ function handleLoading(
     return
   }
   const handleLoad = () => {
-    if (!img.src.startsWith('data:')) {
+    if (img.src !== emptyDataURL) {
       const p = 'decode' in img ? img.decode() : Promise.resolve()
       p.catch(() => {}).then(() => {
         if (placeholder === 'blur') {
@@ -561,7 +563,7 @@ export default function Image({
   }
 
   let imgAttributes: GenImgAttrsResult = {
-    src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+    src: emptyDataURL,
     srcSet: undefined,
     sizes: undefined,
   }

diff --git a/test/integration/image-component/default/pages/on-loading-complete.js b/test/integration/image-component/default/pages/on-loading-complete.js
@@ -11,19 +11,22 @@ const Page = () => (
       width="128"
       height="128"
     />
+    <hr />
     <ImageWithMessage
       id="2"
       src={require('../public/test.png')}
       placeholder="blur"
       layout="fixed"
     />
+    <hr />
     <ImageWithMessage
       id="3"
       src="/test.svg"
       layout="responsive"
       width="1200"
       height="1200"
     />
+    <hr />
     <div style={{ position: 'relative', width: '64px', height: '64px' }}>
       <ImageWithMessage
         id="4"
@@ -32,6 +35,22 @@ const Page = () => (
         objectFit="contain"
       />
     </div>
+    <hr />
+    <ImageWithMessage
+      id="5"
+      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAE0lEQVR42mNk+P+/ngEKGMngAADDdwx3Uz/3AAAAAABJRU5ErkJggg=="
+      layout="fixed"
+      width={64}
+      height={64}
+    />
+    <hr />
+    <div style={{ position: 'relative', width: '64px', height: '64px' }}>
+      <ImageWithMessage
+        id="6"
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAFCAYAAACAcVaiAAAAE0lEQVR42mNk+P+/ngEKGMngAADDdwx3Uz/3AAAAAABJRU5ErkJggg=="
+        layout="fill"
+      />
+    </div>
     <div id="footer" />
   </div>
 )
@@ -50,7 +69,6 @@ function ImageWithMessage({ id, ...props }) {
         {...props}
       />
       <p id={`msg${id}`}>{msg}</p>
-      <hr />
     </>
   )
 }

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -220,6 +220,14 @@ function runTests(mode) {
         () => browser.eval(`document.getElementById("msg4").textContent`),
         'loaded img4 with dimensions 21x21'
       )
+      await check(
+        () => browser.eval(`document.getElementById("msg5").textContent`),
+        'loaded img5 with dimensions 3x5'
+      )
+      await check(
+        () => browser.eval(`document.getElementById("msg6").textContent`),
+        'loaded img6 with dimensions 3x5'
+      )
     } finally {
       if (browser) {
         await browser.close()