mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
StevenandGitHub
676be08d32
Instead of hard error, we can try to convert legacy props to the new props and print a warning. We still recommend upgrading by running one (or both) codemods because the new component no longer has a wrapping `<span>`. <img width="616" alt="image" src="https://user-images.githubusercontent.com/229881/198756393-7d981686-f4db-485b-9f5f-1ff614d35959.png"> Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
27 lines
655 B
JavaScript
27 lines
655 B
JavaScript
import Image from 'next/image'
|
|
|
|
export default function Page() {
|
|
return (
|
|
<div className="page">
|
|
<h1>Using legacy prop layout="fill"</h1>
|
|
<p>
|
|
Even though we don't support "layout" in next/image, we can try to
|
|
correct the style and print a warning.
|
|
</p>
|
|
<div style={{ position: 'relative', width: '200px', height: '400px' }}>
|
|
<Image
|
|
id="img"
|
|
layout="fill"
|
|
src="/test.jpg"
|
|
alt="my fill image"
|
|
quality={50}
|
|
objectFit="cover"
|
|
objectPosition="10% 10%"
|
|
sizes="200px"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|