mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
StevenandGitHub
4b50313fd9
This PR renames `unstable_getImgProps` to `getImageProps()` (originally introduced in PR #51205). Most feedback [after announcing](https://twitter.com/leeerob/status/1674250190432116736) looks positive so it seems like we can safely stabilize this API now. Its unlikely to change. I also added documentation with example usage. Closes NEXT-2120 Fixes https://github.com/vercel/next.js/issues/56009
35 lines
698 B
JavaScript
35 lines
698 B
JavaScript
import { getImageProps } from 'next/image'
|
|
|
|
function loader({ src, width, quality }) {
|
|
return `${src}?wid=${width}&qual=${quality || 35}`
|
|
}
|
|
|
|
export default function Page() {
|
|
const { props: img1 } = getImageProps({
|
|
id: 'img1',
|
|
alt: 'img1',
|
|
src: '/logo.png',
|
|
width: '400',
|
|
height: '400',
|
|
priority: true,
|
|
})
|
|
const { props: img2 } = getImageProps({
|
|
id: 'img2',
|
|
alt: 'img2',
|
|
src: '/logo.png',
|
|
width: '200',
|
|
height: '200',
|
|
loader,
|
|
})
|
|
return (
|
|
<div>
|
|
<h1>Loader Config</h1>
|
|
<img {...img1} />
|
|
<p>Scroll down...</p>
|
|
<div style={{ height: '100vh' }} />
|
|
<h2>Loader Prop</h2>
|
|
<img {...img2} />
|
|
</div>
|
|
)
|
|
}
|