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
48 lines
1.0 KiB
JavaScript
48 lines
1.0 KiB
JavaScript
import React from 'react'
|
|
import { getImageProps } from 'next/image'
|
|
import testJpg from '../public/test.jpg'
|
|
|
|
const Page = () => {
|
|
const { props: img1 } = getImageProps({
|
|
id: 'internal-image',
|
|
src: '/test.png',
|
|
width: 400,
|
|
height: 400,
|
|
})
|
|
const { props: img2 } = getImageProps({
|
|
id: 'static-image',
|
|
src: testJpg,
|
|
width: 400,
|
|
height: 400,
|
|
})
|
|
const { props: img3 } = getImageProps({
|
|
id: 'external-image',
|
|
src: 'https://image-optimization-test.vercel.app/test.jpg',
|
|
width: 400,
|
|
height: 400,
|
|
})
|
|
const { props: img4 } = getImageProps({
|
|
id: 'eager-image',
|
|
src: '/test.webp',
|
|
width: 400,
|
|
height: 400,
|
|
loading: 'eager',
|
|
})
|
|
return (
|
|
<div>
|
|
<h1>Unoptimized Config</h1>
|
|
<p>Scroll down...</p>
|
|
<div style={{ height: '1000vh' }} />
|
|
<img {...img1} />
|
|
<br />
|
|
<img {...img2} />
|
|
<br />
|
|
<img {...img3} />
|
|
<div style={{ height: '1000vh' }} />
|
|
<img {...img4} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Page
|