在 Create React App 中，直接使用相对路径（如 '../images/Sebastian.png'）作为 <img src> 的值无法正确加载图片；必须先通过 import 语句导入图像模块，再将导入的变量赋值给 src 属性。
在 create react app 中，直接使用相对路径（如 `'../images/sebastian.png'`）作为 `` 的值无法正确加载图片；必须先通过 `import` 语句导入图像模块，再将导入的变量赋值给 `src` 属性。
React 应用（尤其是基于 Create React App 构建的项目）在构建时会对静态资源进行处理和哈希化，因此不能直接在运行时通过字符串路径引用本地图片。浏览器会尝试以相对 URL 向服务器请求该路径（例如 /images/Sebastian.png），而该路径通常未被 Webpack 正确解析或未部署到 public 目录下，导致 404 错误。
✅ 正确做法是：将图片作为模块导入，让 Webpack 在编译时解析、优化并返回最终的公共 URL：
// TeamData.js
import Sebastian from '../images/Sebastian.png';
import Felix from '../images/Felix.png';
import Anna from '../images/Anna.png';
export const OurTeamtext = [
{
id: 1,
name: 'Sebastian',
position: 'Founder and CEO',
picture: Sebastian // ✅ 已导入的模块，类型为 string（最终 public URL）
},
{
id: 2,
name: 'Felix Merz',
position: 'CTO',
picture: Felix
},
{
id: 3,
name: 'Anna Schmidt',
position: 'Lead Designer',
picture: Anna
}
];然后在组件中正常映射渲染：
<div className="Team-Members">
{OurTeamtext.map((team) => (
<div key={team.id} className="Team-Member">
<img
src={team.picture}
alt={team.name}
loading="lazy"
width="120"
height="120"
/>
<div className="Team-Member-description">
<p>{team.name}</p>
<p>{team.position}</p>
</div>
</div>
))}
</div>⚠️ 注意事项：
- 不要省略 alt 属性：提升可访问性（a11y），且当图片加载失败时显示替代文本；
- 推荐添加 loading="lazy"：实现图片懒加载，优化首屏性能；
- 若图片尺寸固定，建议显式设置 width/height，避免布局偏移（CLS）；
- 所有图片路径需确保在 src/ 目录下（CRA 不支持直接从 public/ 外部导入）；
- 如果你使用的是 Vite 或 Next.js，请注意其资源处理机制略有不同（Vite 支持 new URL('./xxx.png', import.meta.url).href 方式）。
总结：在 CRA 中，图片不是“文件路径”，而是“模块”。只有通过 import 导入，才能让构建工具识别、处理并注入正确的资源地址——这是 React 工程化实践中一个关键但易被忽略的基础规范。
