Commit graph

5 commits

Author SHA1 Message Date
Steven
946c9c5c46
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 01:35:08 +00:00
Luis Alvarez D
27affb4141
Don't import internally from types in next-env.d.ts (#34394)
* Move type to image component

* Add types/global.d.ts to excludes too

* Undo global exclude as it's using internally

* Don't add root imports for module augmentations
2022-02-19 04:25:49 +01:00
Steven
cc1f3b8a38
Add support for AVIF to next/image (#29683)
Add support for AVIF to `next/image`

- Fixes #27882 
- Closes #27432 

## Feature

- [x] Implements an existing feature request
- [x] Related issues linked
- [x] Integration tests added
- [x] Documentation added
- [x] Update manifest output
- [x] Warn when `sharp` is outdated
- [x] Errors & Warnings have helpful link attached
- [ ] Remove `image-size` in favor of `squoosh`/`sharp` (optional, need to benchmark)
2021-10-11 23:17:47 +00:00
stefanprobst
eb871d3091
Replace placeholder with blurDataURL in global StaticImageData type (#27916)
I think the global `StaticImageData` type does not currently match what actually gets imported, and what the `Image` component expects (see [here](https://github.com/vercel/next.js/blob/canary/packages/next/client/image.tsx#L60-L65)). This PR changes `placeholder` to `blurDataURL`.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes
2021-08-10 15:51:08 +00:00
JJ Kasper
917a9acc2c
Update to only add image import types when enabled (#26485)
* Update to only add image import types when enabled

* add type check to test
2021-06-22 11:56:21 -05:00