如何在TypeScript+React组件中仅传入路径加载图片？

直接传字符串路径无法加载图片的核心原因是：打包工具（如Vite、Create React App）不会将纯字符串路径对应的资源纳入打包流程，运行时自然找不到文件。以下是几种无需逐个导入图片的解决方案：

方案一：利用public目录（通用） #

1. 将图片放到项目根目录的public文件夹下，比如结构为public/assets/testLogo.png
2. 在App.tsx中传入路径时，使用根相对路径（开头加斜杠）：

<Card imageLink="/assets/testLogo.png" alt="Test" title="Test" text="Test"/>

Card组件无需修改，打包工具会自动识别public目录下的资源。

方案二：Vite环境下用new URL()解析路径 #

如果你的项目用Vite构建，可以在Card组件内部处理路径转换：

interface CardProps {
    imageLink: string;
    alt: string;
    title: string;
    text: string;
}

const Card: React.FC<CardProps> = (props) =>{
    // 利用import.meta.url解析相对路径
    const imageUrl = new URL(props.imageLink, import.meta.url).href;
    return(
        <div className="card">
            <img className="card-image" src={imageUrl} alt={props.alt} />
            <h2 className="card-title">{props.title}</h2>
            <p className="card-text">{props.text}</p>
        </div>
    );
}

export default Card

App.tsx中依然可以传./assets/testLogo.png这类相对路径，Vite会自动处理打包。

方案三：TypeScript兼容的动态导入（通用） #

通过require.context批量指定图片目录，实现动态加载，同时兼容TypeScript：

1. 先安装@types/node（如果没装的话）：

npm install @types/node --save-dev

2. 在Card组件同目录下写一个工具函数，或者直接在组件内处理：

interface CardProps {
    imageLink: string;
    alt: string;
    title: string;
    text: string;
}

// 动态获取图片路径的工具函数，参数为相对于assets目录的路径
const getImageUrl = (path: string) => {
    try {
        // 第一个参数是图片所在目录，第二个是否递归子目录，第三个是匹配的文件后缀
        const imageContext = require.context('../assets', false, /\.(png|jpg|jpeg|gif|svg)$/);
        return imageContext(`./${path}`);
    } catch (error) {
        console.error('图片加载失败：', path);
        return '';
    }
};

const Card: React.FC<CardProps> = (props) =>{
    const imageSrc = getImageUrl(props.imageLink);
    return(
        <div className="card">
            <img className="card-image" src={imageSrc} alt={props.alt} />
            <h2 className="card-title">{props.title}</h2>
            <p className="card-text">{props.text}</p>
        </div>
    );
}

export default Card

3. App.tsx中传入相对于assets目录的文件名即可：

<Card imageLink="testLogo.png" alt="Test" title="Test" text="Test"/>

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