getImageProps and alt text

[ulrichgreen]

Summary

I've created a picture element using getImageProps from next/image. But Im a bit confused about the type setup around alt text.

I can pass my alt text to getImageProps along with the rest of the props. And when I destructure the result into ...rest, it contains the alt text I passed in. But when I spread ...rest on Image (the img tag) then typescript complains that alt is missing.

So I guess Im asking why alt is omitted here:

next.js/packages/next/src/shared/lib/get-img-props.ts

Line 72 in ea1618d

export type ImgProps = Omit<ImageProps, 'src' | 'alt' | 'loader'> & {

I mean I can just pass it again to the Image component, but why?

Additional information

No response

Example

const horseProps: NextImageProps = {
    src: "my-valid-absolute-url",
    width: 300,
    height: 300,
    alt: "Beautiful image of a horse"
};

const {
    props: { srcSet: desktop, ...rest },
} = getImageProps(horseProps);

return(
    <source srcSet={desktop} {...otherStuff} />
    <NextImage {...rest} /> // type error: Property 'alt' is missing in type ...yada yada
)

[icyJoseph]

Interesting... the getImageProps function, does pick some properties from the arguments passed to it, and it just echoes the rest.

As you point out, alt, doesn't really have to be removed from the typing of what getImageProps returns though. It is required to pass it, and it will be echo'ed out.

Since they have this explicit type check, for ImgProps:

  const props: ImgProps = {
    ...rest,
    loading: isLazy ? 'lazy' : loading,
    fetchPriority,
    width: widthInt,
    height: heightInt,
    decoding,
    className,
    style: { ...imgStyle, ...placeholderStyle },
    sizes: imgAttributes.sizes,
    srcSet: imgAttributes.srcSet,
    src: overrideSrc || imgAttributes.src,
  }

Accidentally removing alt from rest, will be caught. So your recommendation is fine. I opened a PR here, #70608

[ulrichgreen]

Wonderful. Thanks for satisfying my OCD 👍

[icyJoseph]

No worries, I checked some production code I have, and I had also done the alt reapplication, in spite of the ...rest containing it, because TS complained haha, didn't even think about it! 😅 good catch~