Fix flashing of no-src image when using next/image (#18195)

timneutkens · web-flow · commit 58c161c99bc4 · 2020-10-24T15:23:42.000Z
Solves on of the issues in #18122
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -64,6 +64,7 @@ function getObserver(): IntersectionObserver | undefined {
           if (lazyImage.dataset.srcset) {
             lazyImage.srcset = lazyImage.dataset.srcset
           }
+          lazyImage.style.visibility = 'visible'
           lazyImage.classList.remove('__lazy')
           cachedObserver.unobserve(lazyImage)
         }
@@ -251,6 +252,7 @@ export default function Image({
       paddingBottom: `${ratio}%`,
     }
     imgStyle = {
+      visibility: lazy ? 'hidden' : 'visible',
       height: '100%',
       left: '0',
       position: 'absolute',

Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,7 @@ function getObserver(): IntersectionObserver \| undefined {`
`64`	`64`	`if (lazyImage.dataset.srcset) {`
`65`	`65`	`lazyImage.srcset = lazyImage.dataset.srcset`
`66`	`66`	`}`
	`67`	`+ lazyImage.style.visibility = 'visible'`
`67`	`68`	`lazyImage.classList.remove('__lazy')`
`68`	`69`	`cachedObserver.unobserve(lazyImage)`
`69`	`70`	`}`
`@@ -251,6 +252,7 @@ export default function Image({`
`251`	`252`	paddingBottom: `${ratio}%`,
`252`	`253`	`}`
`253`	`254`	`imgStyle = {`
	`255`	`+ visibility: lazy ? 'hidden' : 'visible',`
`254`	`256`	`height: '100%',`
`255`	`257`	`left: '0',`
`256`	`258`	`position: 'absolute',`