Types of property 'src' are incompatible in nextjs/image

Question

I am using react dropzone to upload multi-image in my simple application. For showing which type of images are drop for that I make a separate component with TypeScript. But Next.js image src is showing error like Type:

'{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes & ImageProps'.
  Type '{ src: string; alt: string; }' is not assignable to type 'ObjectImageProps'.
    Types of property 'src' are incompatible.
      Type 'string' is not assignable to type 'StaticImport'.

RenderFiles.ts:

import { IFile } from "../../libs/types";
import { sizeInMb } from "../../libs/sizeInMb";
import { FunctionComponent } from "react";
import Image from "next/image"

const RenderFile: FunctionComponent<{
  file: IFile;
}> = ({ file: { formate, sizeInBytes, name } }) => {
  return (
    <div>
      <Image src={`/images/${formate}.png`} alt="image"/>
      <span>{name}</span>
      <span>{sizeInMb(sizeInBytes)}</span>
    </div>
  );
};

export default RenderFile;

types.ts:

export interface IFile {
  name: string;
  sizeInBytes: number;
  formate: string | number;
  id?: string;
}

What is my mistake in src props?

are you loading the image from local path or any remote cdn? — Mohammad Abdul Alim, Jun 27 '21 at 06:22
if you are loading image locally then you should use `import image from "img/path";` & ` — Mohammad Abdul Alim, Jun 27 '21 at 06:26
no bro I m using API call for that...if the image was coming from locally that was so much easy. — Arif hossain, Jun 27 '21 at 06:44
adding a `width` and `height` props will solved it. you may also want to add `layout`. — keysl, Jun 27 '21 at 06:56
if it is from remote api call then why are you using `/images/`? in your remote api response it should be a cdn link which will have a url. so it sould be `` something like this. — Mohammad Abdul Alim, Jun 27 '21 at 09:44

score 15 · Answer 1 · answered Jun 27 '21 at 07:05

The issue is next/image's Image is expecting rather complex type ImageProps as it's props:

type StringImageProps = {
  src: string
} & (
  | { width?: never; height?: never; layout: 'fill' }
  | {
      width: number | string
      height: number | string
      layout?: Exclude<LayoutValue, 'fill'>
    }
) &
  (
    | {
        placeholder?: Exclude<PlaceholderValue, 'blur'>
        blurDataURL?: never
      }
    | { placeholder: 'blur'; blurDataURL: string }
  )

type ObjectImageProps = {
  src: StaticImport
  width?: number | string
  height?: number | string
  layout?: LayoutValue
  placeholder?: PlaceholderValue
  blurDataURL?: never
}

export type ImageProps = Omit<
  JSX.IntrinsicElements['img'],
  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'
> & {
  loader?: ImageLoader
  quality?: number | string
  priority?: boolean
  loading?: LoadingValue
  unoptimized?: boolean
  objectFit?: ImgElementStyle['objectFit']
  objectPosition?: ImgElementStyle['objectPosition']
} & (StringImageProps | ObjectImageProps)

Since you're not importing image from local imports the only structure you're left is StringImageProps. To conform to it you have to provide one of the following props sets:

<Image src={string} layout="fill" />
// or
<Image src={string} width={number} height={number} /> // with optional `layout` prop but not of type 'fill'

both variants may be extended with optional placeholder (not of type 'blur') or required placeholder: 'blur' and blurDataURL: string.

And only after that you may provide native image's attributes as alt.

EternalObserver · Answer 2 · 2022-12-26T05:44:27.673

Importing the type for ImageLoaderProps solved the issue for me.

Example:

import Image from 'next/image';
import type { ImageLoaderProps } from 'next/image';

const myLoader = ({ src, width, quality }: ImageLoaderProps) => {
  return `https://example.com/?${src}?w=${width}&q=${quality}`;
};

export default function TestComponent(props: Record<string, string>) {
  const { imageResource } = props;
  return (
        <Image
          loader={myLoader}
          src={`/${imageResource}`}
          width="20%"
          height="20%"
        />
  );
}

score -1 · Answer 3 · answered Jul 13 '21 at 16:59

-1

I omitted placeholder, blurDataURL and layout. I also made explicity src as string. More info on this issue: https://github.com/vercel/next.js/issues/26735

answered Jul 13 '21 at 16:59

Bruno Quaresma

9,457
7
32
50

score -3 · Answer 4 · answered Aug 02 '21 at 06:08

-3

Just cast string as a any

<Image src={'string' as any} alt='Pic' />

answered Aug 02 '21 at 06:08

Alex Santos

39
4

I think the assumption is when a question around TypeScript is posed, OP is aware that casting as `any` is an option, but is looking for a strongly typed solution. – rantao Sep 10 '21 at 23:48

Types of property 'src' are incompatible in nextjs/image

4 Answers4

Linked