Skip to content

Commit

Permalink
fix: Do not omit alt on getImgProps return type, ImgProps (#70608)
Browse files Browse the repository at this point in the history
### What?

Small type tweak, asked for in
#70443

### Why?

The `alt` prop is required on the call to `getImgProps`, and the
implementation, returns it back to the caller, however, the type
signature of the return type for `getImgProps`, omits the `alt` prop,
which means that users have to manually apply the `alt` prop.

That is to say, that in this example, tweaked from the docs:

```jsx
import { getImageProps } from 'next/image'
 
export default function Page() {
  const common = { alt: 'Theme Example', width: 800, height: 400 }
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' })
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: '/light.png' })
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      {/* the alt prop is here, but as far as TypeScript is concerned, it is not */}
      <SomeCustomImageComponent {...rest} /> 
    </picture>
  )
}
``` 

So users have to do:

```jsx
      <SomeCustomImageComponent {...rest} alt={common.alt} /> 
```

See more at, #70443

### How?

Remove `alt` from the Omit union.

```tsx
export type ImgProps = Omit<ImageProps, 'src'  | 'alt' | 'loader'> & { /* other stuff */ }
```

Fixes #70443
  • Loading branch information
icyJoseph authored Oct 2, 2024
1 parent 7958c79 commit 1a81fe4
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/next/src/shared/lib/get-img-props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export type ImageProps = Omit<
lazyRoot?: string
}

export type ImgProps = Omit<ImageProps, 'src' | 'alt' | 'loader'> & {
export type ImgProps = Omit<ImageProps, 'src' | 'loader'> & {
loading: LoadingValue
width: number | undefined
height: number | undefined
Expand Down
24 changes: 24 additions & 0 deletions test/unit/next-image-get-img-props.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,30 @@ describe('getImageProps()', () => {
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
])
})

it('should have correct type for props', async () => {
const { props } = getImageProps({
alt: 'a nice desc',
id: 'my-image',
src: '/test.png',
width: 100,
height: 200,
})

expect(props.alt).toBeString()
expect(props.id).toBeString()
expect(props.loading).toBeString()

expect(props.width).toBeNumber()
expect(props.height).toBeNumber()

expect(props.decoding).toBeString()
expect(props.style).toBeObject()
expect(props.style.color).toBeString()
expect(props.src).toBeString()
expect(props.srcSet).toBeString()
})

it('should handle priority', async () => {
const { props } = getImageProps({
alt: 'a nice desc',
Expand Down

0 comments on commit 1a81fe4

Please sign in to comment.