Skip to content

Commit

Permalink
Fix decode for old browsers
Browse files Browse the repository at this point in the history
  • Loading branch information
styfle committed Jun 10, 2021
1 parent f23303a commit 38c65a8
Showing 1 changed file with 10 additions and 9 deletions.
19 changes: 10 additions & 9 deletions packages/next/client/image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -262,26 +262,27 @@ function defaultImageLoader(loaderProps: ImageLoaderProps) {
// See https://stackoverflow.com/q/39777833/266535 for why we use this ref
// handler instead of the img's onLoad attribute.
function removePlaceholder(
element: HTMLImageElement | null,
img: HTMLImageElement | null,
placeholder: PlaceholderValue
) {
if (placeholder === 'blur' && element) {
if (placeholder === 'blur' && img) {
const handleLoad = () => {
if (!element.src.startsWith('data:')) {
;(element.decode || Promise.resolve)().then(() => {
element.style.filter = 'none'
element.style.backgroundSize = 'none'
element.style.backgroundImage = 'none'
if (!img.src.startsWith('data:')) {
const p = 'decode' in img ? img.decode() : Promise.resolve()
p.then(() => {
img.style.filter = 'none'
img.style.backgroundSize = 'none'
img.style.backgroundImage = 'none'
})
}
}
if (element.complete) {
if (img.complete) {
// If the real image fails to load, this will still remove the placeholder.
// This is the desired behavior for now, and will be revisited when error
// handling is worked on for the image component itself.
handleLoad()
} else {
element.onload = handleLoad
img.onload = handleLoad
}
}
}
Expand Down

0 comments on commit 38c65a8

Please sign in to comment.