Estoy luchando con las interfaces en mi pequeño proyecto de aprendizaje NextJS y TypeScript. Pensé que lo había solucionado, pero estoy lidiando con un problema en mi Header.tsx cuando se trata de mi prop src en mi componente Header . Sigo recibiendo los siguientes mensajes de error

El tipo 'StaticImageData' no se puede asignar al tipo 'cadena'. El tipo esperado proviene de la propiedad 'src' que se declara aquí en el tipo 'IntrinsicAttributes & ILogo & { children?: ReactNode; }'

Todavía no estoy completamente seguro de entender los accesorios de los niños y cómo hacer que fluyan de padre a hijo, lo que ha hecho que un error como este sea un poco frustrante.

Seguí adelante y publiqué el código del dedo del pie a continuación y agradezco las sugerencias para resolver el problema inmediato y las formas de mitigarlo en el futuro.

Encabezado.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;

Logotipo.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; }