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
– Mohammad Abdul Alim, Commented Jun 27, 2021 at 6:22
if you are loading image locally then you should use import image from "img/path"; & <Image src={image} alt="something" — Mohammad Abdul Alim
– Mohammad Abdul Alim, Commented Jun 27, 2021 at 6:26
no bro I m using API call for that...if the image was coming from locally that was so much easy. — Arif hossain
– Arif hossain, Commented Jun 27, 2021 at 6:44
adding a width and height props will solved it. you may also want to add layout. — keysl
– keysl, Commented Jun 27, 2021 at 6: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 <Image src={url} /> something like this. — Mohammad Abdul Alim
– Mohammad Abdul Alim, Commented Jun 27, 2021 at 9:44

aleksxor · Accepted Answer · 2021-06-27 07:05:26Z

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 · Accepted Answer · 2022-12-26 05:44:27Z

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%" /> ); }

Oussama Makhlouk · Accepted Answer · 2024-11-06 01:23:05Z

For people that still have this issue, I had similar issue and I was using

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

You can try to import the StaticImageData type from "next/image"

Example:

import Image, {StaticImageData} from "next/image"; import image from "./pathImage" ... <Image src = {image as StaticImageData}/>

Bruno Quaresma · Accepted Answer · 2021-07-13 16:59:42Z

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

Alex Santos · Accepted Answer · 2021-08-02 06:08:54Z

-2

Just cast string as a any

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

answered Aug 2, 2021 at 6:08

Alex Santos

494 bronze badges

2 Comments

rantao Over a year ago

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.

Vacilando Over a year ago

Well, it's true that casting solves the problem very easily <Image src={imgURL as string} alt={imgName as string} />

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Linked

Related