I'm currently using React Dropzone to upload multiple images in my basic application. To display the types of images that are being dropped, I created a separate component with TypeScript. However, Next.js is throwing an error when it comes to the image source:
'{ src: string; alt: string; }' is not compatible with type 'IntrinsicAttributes & ImageProps'.
Type '{ src: string; alt: string; }' does not align with type 'ObjectImageProps'.
The types for the 'src' property are conflicting.
String type cannot be assigned to StaticImport type.
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;
}
Where did I go wrong with the src prop?