本文详解 react 应用中从 json 文件动态渲染图片的正确方式，重点解决因路径错误、`require()` 字符串化、公共目录配置不当等导致的图片不显示问题，并提供可直接运行的实践方案。
在 React 中直接将 "require('@img/person1.jpg')" 这类字符串写入 JSON 并期望自动执行模块引入，是根本不可行的——JSON 是纯数据格式，不支持函数调用或动态导入语法。Webpack/Vite 等构建工具在编译期解析 require() 或 import()，而 JSON 中的字符串仅被当作普通文本读取，不会触发模块解析，因此 <img src="require('@img/person1.jpg')"/> 实际会尝试加载一个名为 require('@img/person1.jpg') 的无效路径，必然 404。
✅ 正确做法是：将图片资源统一置于 public/ 目录下，使用绝对路径引用（如 /images/person1.jpg），或在 JavaScript 层预导入图片变量，再注入 JSON 数据结构。
✅ 推荐方案一：使用 public/ 目录（最简单可靠）
将所有头像图片放入 public/images/ 文件夹（例如 public/images/person1.jpg），然后在 JSON 中存储相对 public 根路径的 URL：
[
{
"id": 0,
"comittee": false,
"img": "/images/person1.jpg",
"desc": "Here's a short description...",
"position": "member"
},
{
"id": 1,
"comittee": false,
"img": "/images/person2.jpg",
"desc": "Here's a short description...",
"position": "member"
}
]组件中直接使用该路径即可：
function Person({ name, img, position, desc }) {
return (
<div className="person-card">
<h3>{name}</h3>
<img
src={img}
alt={`${name}'s profile`}
onError={(e) => {
e.target.src = '/images/placeholder.png'; // 可选：兜底占位图
}}
/>
<p><strong>{position}</strong></p>
<p>{desc}</p>
</div>
);
}⚠️ 注意：public/ 下的文件通过 /xxx 访问，无需 import；但路径必须以 / 开头，确保为根绝对路径（避免路由嵌套时路径解析错误）。
✅ 推荐方案二：JS 预导入 + 数据组合（适合需 Webpack 处理的场景，如 SVG/优化压缩）
若需利用 require() 或 import 触发 Webpack 图片处理（如生成哈希名、内联 base64、SVG React 组件等），则不能将 require() 写入 JSON，而应在 JS 中完成导入与数据合并：
// data.js
import person1 from '@img/person1.jpg';
import person2 from '@img/person2.jpg';
export const profiles = [
{ id: 0, name: 'Alex Johnson', img: person1, position: 'member', desc: '...' },
{ id: 1, name: 'Sam Lee', img: person2, position: 'member', desc: '...' },
];然后在组件中直接导入使用：
import { profiles } from './data.js';
function App() {
return (
<section className="profiles">
{profiles.map((data) => (
<Person
key={data.id}
name={data.name}
img={data.img}
position={data.position}
desc={data.desc}
/>
))}
</section>
);
}❌ 常见错误总结
- 将 require(...) 作为字符串存入 JSON → ❌ JSON 不执行代码
- 使用相对路径如 img/person1.jpg 且未配 public/ → ❌ 资源 404（除非用 file-loader 等特殊配置）
- 忘记为 <img> 添加 alt 属性 → ❌ 可访问性不合规
- 未处理图片加载失败 → ❌ 用户看到空白或断裂图标（建议用 onError 回退）
✅ 最佳实践建议
- 优先采用 public/ 方案，简洁、零配置、兼容 SSR；
- 图片命名语义化（如 person-alex-johnson.jpg），便于维护；
- 对关键头像添加 loading="lazy" 和 decoding="async" 提升性能；
- 生产环境启用图片压缩（如 vite-plugin-imagemin 或 Webpack image-minimizer-webpack-plugin）。
只要避开“字符串化 require”这一核心陷阱，React 中 JSON 驱动的图片渲染便能稳定可靠地工作。
