Fix next/image
incorrectly warning for position: absolute
parent (#34551)
- Fixes #33007 - Fixes #31340
This commit is contained in:
parent
44bc4d92f5
commit
9e77ef4ec6
3 changed files with 9 additions and 1 deletions
|
@ -280,7 +280,8 @@ function handleLoading(
|
|||
} else if (
|
||||
layout === 'fill' &&
|
||||
parent.position !== 'relative' &&
|
||||
parent.position !== 'fixed'
|
||||
parent.position !== 'fixed' &&
|
||||
parent.position !== 'absolute'
|
||||
) {
|
||||
console.warn(
|
||||
`Image with src "${src}" may not render properly with a parent using position:"${parent.position}". Consider changing the parent style to position:"relative" with a width and height.`
|
||||
|
|
|
@ -2,6 +2,7 @@ import React from 'react'
|
|||
import Image from 'next/image'
|
||||
import jpg from '../public/test.jpg'
|
||||
import png from '../public/test.png'
|
||||
import avif from '../public/test.avif'
|
||||
import webp from '../public/test.webp'
|
||||
|
||||
const Page = () => {
|
||||
|
@ -14,6 +15,9 @@ const Page = () => {
|
|||
<div style={{ position: 'fixed', width: '200px', height: '200px' }}>
|
||||
<Image id="fixed" layout="fill" priority src={png} />
|
||||
</div>
|
||||
<div style={{ position: 'absolute', width: '200px', height: '200px' }}>
|
||||
<Image id="absolute" layout="fill" priority src={avif} />
|
||||
</div>
|
||||
<div style={{ position: 'relative', width: '200px', height: '200px' }}>
|
||||
<Image id="relative" layout="fill" priority src={webp} />
|
||||
</div>
|
||||
|
|
|
@ -669,6 +669,9 @@ function runTests(mode) {
|
|||
expect(warnings).not.toMatch(
|
||||
/Image with src (.*)png(.*) may not render properly/gm
|
||||
)
|
||||
expect(warnings).not.toMatch(
|
||||
/Image with src (.*)avif(.*) may not render properly/gm
|
||||
)
|
||||
expect(warnings).not.toMatch(
|
||||
/Image with src (.*)webp(.*) may not render properly/gm
|
||||
)
|
||||
|
|
Loading…
Reference in a new issue