title: Types of property 'src' are incompatible in nextjs/image
body: <p>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:</p>
  <pre><code>'{ src: string; alt: string; }' is not assignable to type 'IntrinsicAttributes &amp; 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'.
  </code></pre>
  <p>RenderFiles.ts:</p>
  <pre class="lang-js prettyprint-override"><code>import { IFile } from &quot;../../libs/types&quot;;
  import { sizeInMb } from &quot;../../libs/sizeInMb&quot;;
  import { FunctionComponent } from &quot;react&quot;;
  import Image from &quot;next/image&quot;
  
  const RenderFile: FunctionComponent&lt;{
    file: IFile;
  }&gt; = ({ file: { formate, sizeInBytes, name } }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Image src={`/images/${formate}.png`} alt=&quot;image&quot;/&gt;
        &lt;span&gt;{name}&lt;/span&gt;
        &lt;span&gt;{sizeInMb(sizeInBytes)}&lt;/span&gt;
      &lt;/div&gt;
    );
  };
  
  export default RenderFile;
  </code></pre>
  <p>types.ts:</p>
  <pre class="lang-js prettyprint-override"><code>export interface IFile {
    name: string;
    sizeInBytes: number;
    formate: string | number;
    id?: string;
  }
  </code></pre>
  <p>What is my mistake in src props?</p>