javascript - 'StaticImageData' türü 'string' türüne atanamaz

Küçük öğrenme projem olan NextJS ve TypeScript üzerinde arayüzlerle uğraşıyorum. Halletmiş olduğumu düşünmüştüm ama Header.tsx dosyamda, Header bileşenimdeki src özelliği ile ilgili bir sorunla karşılaşıyorum. Şu hata mesajlarını almaya devam ediyorum

Type 'StaticImageData', 'string' türüne atanamaz. Beklenen tür, burada 'IntrinsicAttributes & ILogo & { children?: ReactNode; }' türünde tanımlanmış 'src' özelliğinden gelmektedir.

Çocuk bileşenlerini ve bunları üst bileşenden alt bileşene nasıl aktaracağımı anlamakta hâlâ tam olarak kendime güvenmiyorum, bu da böyle bir hatayı biraz sinir bozucu hale getirdi.

Aşağıya kodu ekledim ve hem mevcut sorunu çözmek için hem de gelecekte bunu hafifletmenin yolları için önerilerinizi bekliyorum.

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

Cevap #1

Resminizi içe aktardıktan sonra sonucu konsolunuzda yazdırabilirsiniz. Eğer [object object] gibi bir şey alırsanız, o zaman nesnedeki belirli src özelliğini sormanız gerekir:

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

Cevap #2

Yerel bir statik resim geçiyorsunuz, bu yüzden bunu tipe eklemeniz gerekiyor, bunun yerine

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

Bunu alabilirsin

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

İlgili makaleler