Type 'StaticImageData' is not assignable to type 'string'

Question

I'm struggling with interfaces on my little learning NextJS and TypeScript project. I thought I had it sorted out but am dealing with an issue on my Header.tsx when it comes to my src prop on my Header component. I keep getting the following error messages

Type 'StaticImageData' is not assignable to type 'string'. The expected type comes from property 'src' which is declared here on type 'IntrinsicAttributes & ILogo & { children?: ReactNode; }'

I'm still not full confident in understand children props and how to make them flow from parent to child which has made an error like this a bit frustrating.

I've gone ahead and posted toe code below and welcome and suggestions both to solve the immediate problem, and ways to mitigate this in the future.

Header.tsx

import React from "react";
import Navbar from "./Navbar/Navbar";
import Logo from "../Logo";
import companyLogo from "../../../public/assets/images/logo.png";
import { ILogo } from "../../types/headerType";

const Header = () => {
  return (
    <div className="container flex justify-between h-16 max-w-full bg-pink-400 h-100px">
      <Logo className="object-cover" src={companyLogo} />
      <Navbar />
    </div>
  );
};

export default Header;

Logo.tsx

import Image from "next/image";
import Link from "next/link";
import React, { FunctionComponent } from "react";
import { ILogo } from "../types/headerType";

const Logo: FunctionComponent<ILogo> = ({ src }) => {
  return (
    <div>
      <Link href="/">
        <a>
          <Image
            src={src}
            alt="Logo"
            className="object-cover cursor-pointer"
            height="100px"
            width="320px"
            layout="intrinsic"
          />
        </a>
      </Link>
    </div>
  );
};

export default Logo;

headerType.ts

export interface ILogo {
  //   image: HTMLImageElement;
  src: string;
  className?: string;
}

Answer 1

You can print in your console the result from importing your image. If you get something like [object object], then you need to ask for the specific src property in the object:

<Logo className="object-cover" src={companyLogo.src} />

Answer 2

You are passing a local static image so you need to add it to the type, instead of

export interface ILogo {
  //   image: HTMLImageElement;
  src: string;
  className?: string;
}

You can have this

export interface ILogo {
  //   image: HTMLImageElement;
  src: string | StaticImageData;
  className?: string;
}

Answer 3

Alternatively, it is much easier to use:

import React from "react";
import Navbar from "./Navbar/Navbar";
import Image from 'next/image';
import companyLogo from "../../../public/assets/images/logo.png";

const Header = () => {
  return (
    <div className="container flex justify-between h-16 max-w-full bg-pink-400 h-100px">
      <Image className="object-cover" src={companyLogo} />
      <Navbar />
    </div>
  );
};

export default Header;

Answer 4

or use a template string
src={${src}} worked for me