我在学习 NextJS 和 TypeScript 项目的小界面上苦苦挣扎。我以为我已经解决了,但是当涉及到我的 src
时,我正在处理我的 Header.tsx 上的一个问题。支持我的Header
零件。我不断收到以下错误消息
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; }'
我对理解 child Prop 以及如何让它们从 parent 流向 child 仍然没有完全信心,这使得这样的错误有点令人沮丧。
我已经继续并在下面发布了脚趾代码,并欢迎和提出建议,以解决当前的问题,以及将来减轻这种情况的方法。
页眉.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;
}
最佳答案
您可以在控制台中打印导入图像的结果。如果你得到类似 [object object] 的东西,那么你需要询问对象中的特定 src 属性:
<Logo className="object-cover" src={companyLogo.src} />
关于javascript - 类型 'StaticImageData' 不可分配给类型 'string',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71015465/