React TypeScript中Props传递本地图片无法加载的问题排查

刚接触TypeScript，正在将其集成到React网站中，遇到了无法通过Props加载本地图片的问题。

项目数据数组定义（含图片路径）：

const projectsArray: readonly { id: number, name: string, short: string, description: string, imgUrl: string }[] = [
{
    id: 1,
    name: "Dinosource",
    short: "Digital Agency IMD",
    description: "Let's find out what this project is about",
    imgUrl: "../../public/testimg.jpeg",
},
{
    id: 2,
    name: "Kraakkwartier",
    short: "Podcast jeugd-cultuur",
    description: "Let's find out what this project is about",
    imgUrl: "../../public/testimg.jpeg",
}] 
export default projectsArray;

组件代码：

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

疑问：

• 文件路径应该相对于数组文件还是组件文件？
• 是否存在TypeScript相关错误？
• 希望得到代码优化的建议。

1. 图片路径问题 #

public文件夹是React项目的静态资源根目录，编译后所有public内的资源都会直接放在网站根目录下，所以路径应该直接用根相对路径，和数组文件、组件文件的位置无关。

把数组里的imgUrl改成/testimg.jpeg即可：

imgUrl: "/testimg.jpeg"

之前用../../public/testimg.jpeg会导致编译后路径错误，因为React处理组件时会把相对路径解析为相对于组件文件的位置，但public资源的访问规则是从根目录开始的。

2. TypeScript相关检查 #

当前代码没有TS语法错误，但类型定义可以优化，避免重复。把项目类型抽成单独的interface，在数组和组件Props中复用：

// projectsArray.ts
export interface Project {
  id: number;
  name: string;
  short: string;
  description: string;
  imgUrl: string;
}

const projectsArray: readonly Project[] = [
  // ... 项目数据
];
export default projectsArray;

组件中直接导入复用：

// Projects.tsx
import { Project } from "../data/projectsArray";

// 直接用Project作为Props类型，无需重复定义
function createProject({id, name, short, description, imgUrl}: Project){
  // ...
}

3. 代码优化建议 #

• 将createProject改为独立组件：更符合React组件化习惯，可读性更强：

  function ProjectCard({ id, name, short, description, imgUrl }: Project) {
    return (
      <article 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>
    );
  }
  

  渲染时将key放在map返回的最外层元素上（React最佳实践）：

  {projects.map(project => <ProjectCard key={project.id} {...project} />)}
  

• 用import导入图片（更安全的方式）：直接导入图片让TS自动检查路径有效性，避免拼写错误：

  // projectsArray.ts
  import testImg from "../public/testimg.jpeg";
  
  const projectsArray: readonly Project[] = [
    {
      id: 1,
      // ...
      imgUrl: testImg,
    },
  ];
  

  这种方式下React会自动处理图片路径，确保加载正确。

• 简化样式类名：CSS Modules的类名可以更简洁，比如projectCard改成card，projectTitle改成title，配合模块名不会冲突，代码更清爽。

内容的提问来源于stack exchange，提问作者Rix11