如何在 React 中正确从 JSON 数据中加载并显示图片

本文详解 react 应用中从 json 文件动态渲染图片的正确方式，重点解决因路径错误、`require()` 字符串化、公共目录配置不当等导致的图片不显示问题，并提供可直接运行的实践方案。

在 react 中直接将 “require(‘@img/person1.jpg’)” 这类字符串写入 jsON 并期望自动执行模块引入，是根本不可行的——json 是纯数据格式，不支持函数调用或动态导入语法。webpack/vite 等构建工具在编译期解析 require() 或 import()，而 JSON 中的字符串仅被当作普通文本读取，不会触发模块解析，因此 实际会尝试加载一个名为 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 (     
       
{name}
       @@##@@ {           e.target.src = '/images/placeholder.png'; // 可选：兜底占位图         }}       />       
{position}
       
{desc}
     
   ); }

⚠️ 注意：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 (     
       {profiles.map((data) => (                ))}     
   ); }

❌ 常见错误总结

• 将 require(…) 作为字符串存入 JSON → ❌ JSON 不执行代码
• 使用相对路径如 img/person1.jpg 且未配 public/ → ❌ 资源 404（除非用 file-loader 等特殊配置）
• 忘记为 添加 alt 属性 → ❌ 可访问性不合规
• 未处理图片加载失败 → ❌ 用户看到空白或断裂图标（建议用 onError 回退）

✅ 最佳实践建议

• 优先采用 public/ 方案，简洁、零配置、兼容 SSR；
• 图片命名语义化（如 person-alex-johnson.jpg），便于维护；
• 对关键头像添加 loading=”lazy” 和 decoding=”async” 提升性能；
• 生产环境启用图片压缩（如 vite-plugin-imagemin 或 Webpack image-minimizer-webpack-plugin）。

只要避开“字符串化 require”这一核心陷阱，React 中 JSON 驱动的图片渲染便能稳定可靠地工作。