我是Typescript的新手，并试图将其构建到我的React网站中。 似乎我无法通过道具加载图像？你能告诉我为什么吗？

Question

import styles from "../styles/projects.module.css"
import projects from "../data/projectsArray"

interface ProjectProps {
    id: number;
    name: string;
    short: string;
    description: string;
    imgUrl: string;
}

function createProject({id, name, short, description, imgUrl}: ProjectProps){
    return (
        <article key={id} className={styles.projectCard}>
            <h1 className={styles.projectTitle}>{name}</h1>
            <p className={styles.projectDescription}>{short}</p>
            <img className={styles.projectImage} width={100} height={100} src={imgUrl} alt={name} />
            <p className={styles.projectDescription}>{description}</p>
        </article>
            )
}

export default function Projects() {

    return (
        <section className={styles.sectionProjects}>
            <h2><span>My Favourite </span>Projects</h2>
            <div className={styles.projectContainer} >
              {projects.map(createProject)}
            </div>
        </section>
    )
}

我对这个错误有：

文件路径必须相对于数组文件或组件文件（在其他文件夹中）？在这里只是监督打字稿错误。

此外，如果您有技巧或注意到我的新手打字稿写作中的重大错误，我愿意接受反馈：P

首先，您需要导入图像以在IMG元素

中使用

• import imgName from '../../public/testimg.jpeg
然后将其放在IMG

中

<img src={imgName} />

Answer 1

如果您使用的是NextJ，建议使用ImageComponent.