archive/rsnext - DevGit

archive/rsnext

2 lines

61 B

JavaScript

Raw Normal View History

Add `unstable_getImgProps` export from `next/image` (#51205) ### Description This PR refactors the Image component so that the core logic can be consolidated into a single function. This allows usage outside of `<Image>`, such as: 1. Working with [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) or [`image-set`](https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set) 2. Working with canvas [`context.drawImage()`](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images) or simply `new Image()` 3. Working with [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) media queries to implement Art Direction or Light/Dark Mode images ### Example ```tsx import { unstable_getImgProps as getImgProps } from 'next/image' export default function Page() { const common = { alt: 'Hero', width: 800, height: 400 } const { props: { srcSet: dark } } = getImgProps({ ...common, src: '/dark.png' }) const { props: { srcSet: light, ...rest } } = getImgProps({ ...common, src: '/light.png' }) return (<picture> <source media="(prefers-color-scheme: dark)" srcSet={dark} /> <source media="(prefers-color-scheme: light)" srcSet={light} /> <img {...rest} /> </picture>) } ``` ### Related fix NEXT-257 Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>

2023-06-29 03:35:08 +02:00

module.exports = require('./dist/shared/lib/image-external')