archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Skip warnings for Image not rendered to the dom (#32049)

Browse source 
Some libraries, like react-slick, render their content to a detached element before attaching it to the dom. If the content of such libraries is Image components, they will report warnings because the display/position properties are undefined. This PR squelch the warnings for such cases.
This commit is contained in:
Lucas Wiener 2021-12-03 07:40:45 +01:00 committed by GitHub
parent b6914198b4
commit 80ec93d1bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/next/client/image.tsx
View file

@ -279,7 +279,9 @@ function handleLoading(
if (process.env.NODE_ENV !== 'production') {
if (img.parentElement?.parentElement) {
const parent = getComputedStyle(img.parentElement.parentElement)
if (layout === 'responsive' && parent.display === 'flex') {
if (!parent.position) {
// The parent has not been rendered to the dom yet and therefore it has no position. Skip the warnings for such cases.
} else if (layout === 'responsive' && parent.display === 'flex') {
console.warn(
`Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`
)