Setting a ref on the NextJS Image component creates a typescript error

Question

I'm trying to refactor one of my components to use typescript. As you see below, I'm using a reference on the NextJS Image component and trying to set the type

import { useRef } from 'react'
import Image, { ImageProps } from 'next/image'


type BannerBlockProps = {
  image?: ImageProps[]
}

const BannerBlock = (props: BannerBlockProps) => {
  const imageRef = useRef<HTMLImageElement >(null)

  return (
  
        <div className='BannerBlock-imageWrapper' >
          <Image className="BannerBlock-image" src={image[0].src} alt={image[0].alt} width={image[0].width} height={image[0].height} ref={imageRef}/>
        </div>
  )
}

export default BannerBlock

I then get the following typescript error on the Image ref property: :

(property) ref: RefObject Type '{ className: string; src: string | StaticImport; alt: string | undefined; width: string | number | undefined; height: string | number | undefined; ref: RefObject; }' is not assignable to type 'IntrinsicAttributes & Omit<DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>, "src" | ... 4 more ... | "loading"> & { ...; }'. Property 'ref' does not exist on type 'IntrinsicAttributes & Omit<DetailedHTMLProps<ImgHTMLAttributes, HTMLImageElement>, "src" | ... 4 more ... | "loading"> & {

It happens because in next/dist/client/image.d.ts the ref type is omitted on the ImageProps:

export declare type ImageProps = Omit<JSX.IntrinsicElements['img'], 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'> & {
    src: string | StaticImport;
    width?: number | string;
    height?: number | string;
    layout?: LayoutValue;
    loader?: ImageLoader;
    quality?: number | string;
    priority?: boolean;
    loading?: LoadingValue;
    lazyRoot?: React.RefObject<HTMLElement> | null;
    lazyBoundary?: string;
    placeholder?: PlaceholderValue;
    blurDataURL?: string;
    unoptimized?: boolean;
    objectFit?: ImgElementStyle['objectFit'];
    objectPosition?: ImgElementStyle['objectPosition'];
    onLoadingComplete?: OnLoadingComplete;
};

The error disappears when I remove | 'ref' from the list of omitted properties. Why is this property omitted? Is it bad practice to use the ref property on an Image component? It's easily fixed putting a wrapper div on the image component and add the reference there, but I am curious to why this is not possible and if I'm doing this right.

I would say you are using the right approach. NextJS's Image component is a bit of a mess, so I don't know for certain, but the reason why ref is not accepted as a prop is because they are already using the image ref for something else github.com/vercel/next.js/blob/canary/packages/next/client/… . So if wrapping it in a div element and using that reference instead works just fine, I would go for that. — David G.
– David G., Commented Aug 4, 2022 at 12:20
Thanks, I believe you're right. I think it is related to this issue as is referenced in the code here. — Lennart de Knikker
– Lennart de Knikker, Commented Aug 5, 2022 at 15:46

Anton Kouliavtsev · Accepted Answer · 2022-12-09 08:39:53Z

2

Passing ref to next/image seems to be added in next 13.0.6.

answered Dec 9, 2022 at 8:39

Anton Kouliavtsev

997 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting a ref on the NextJS Image component creates a typescript error

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related