Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix next/future/image blur-up placeholder #39785

Merged
merged 11 commits into from Aug 23, 2022
Merged

Fix next/future/image blur-up placeholder #39785

Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
079fba7
Fix `next/future/image` placeholder jpeg
styfle Aug 20, 2022
1745908
Fix preserveAspectRatio
styfle Aug 20, 2022
0b8902b
Add check for blurDataURL
styfle Aug 20, 2022
da0412b
Fix default backgroundPosition and avoid repeat
styfle Aug 20, 2022
8e34443
Also hide alt text for blur placeholder
styfle Aug 20, 2022
c95ebc8
Fix stdDeviation thanks to jridgewell
styfle Aug 23, 2022
e61d607
Merge branch 'canary' into fix-svg-blur-again
styfle Aug 23, 2022
85a4847
Update static import tests
styfle Aug 23, 2022
f5619c3
Fix more tests
styfle Aug 23, 2022
eb800d5
Fix remaining tests
styfle Aug 23, 2022
e76743b
Fix another test
styfle Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 19 additions & 6 deletions packages/next/client/future/image.tsx
View file
Open in desktop
Expand Up @@ -759,20 +759,33 @@ export default function Image({
bottom: 0,
}
: {},
showAltText || placeholder === 'blur' ? {} : { color: 'transparent' },
showAltText ? {} : { color: 'transparent' },
style
)
const svgBlurPlaceholder = `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 ${widthInt} ${heightInt}'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='${blurDataURL}'/%3E%3C/svg%3E")`
const backgroundSize = imgStyle.objectFit || 'cover'
const backgroundPosition = imgStyle.objectPosition || '50% 50%'
const preserveAspectRatio =
backgroundSize === 'contain'
? 'xMidYMid'
: backgroundSize === 'cover'
? 'xMidYMid slice'
: 'none'
const svgBlurPlaceholder = `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 ${widthInt} ${heightInt}' preserveAspectRatio='${preserveAspectRatio}' %3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='50'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='${blurDataURL}'/%3E%3C/svg%3E")`
styfle marked this conversation as resolved.
Show resolved Hide resolved

const blurStyle =
placeholder === 'blur' && !blurComplete
placeholder === 'blur' && blurDataURL && !blurComplete
? {
backgroundSize: imgStyle.objectFit || 'cover',
backgroundPosition: imgStyle.objectPosition || '0% 0%',
...(blurDataURL?.startsWith('data:image')
backgroundSize,
backgroundPosition,
backgroundRepeat: 'no-repeat',
...(blurDataURL.startsWith('data:image/jpeg')
? {
backgroundImage: svgBlurPlaceholder,
}
: {
// Fallback to CSS filter in any of the following cases:
// if blurDataURL might be transparent (never true for jpeg)
// or if blurDataURL is an external url (always true for `next dev`)
filter: 'blur(20px)',
backgroundImage: `url("${blurDataURL}")`,
}),
Expand Down