React中JSON配合img src={require()}失效问题求助

你遇到的问题本质是打包工具（比如Webpack）的静态资源解析机制导致的：

• 当你写require('./images/photosnap.svg')时，这是一个静态字符串路径，Webpack在编译阶段就能定位到文件，把它打包并生成正确的资源URL。
• 但require(data.logo)里的data.logo是运行时才确定的变量，Webpack编译时没法提前知道它的具体值，也就没法提前处理对应的图片资源，所以会加载失败。

下面给你几种可行的解决办法：

方法1：手动导入+映射表 #

先把所有需要的图片手动导入，再创建一个路径到图片的映射，最后通过映射表获取图片：

import jobData from './data.json';
// 导入所有用到的图片
import photosnapLogo from './images/photosnap.svg';
import manageLogo from './images/manage.svg';
// 其他图片依次导入...

// 创建路径映射
const logoMap = {
  './images/photosnap.svg': photosnapLogo,
  './images/manage.svg': manageLogo,
  // 对应json里的每个logo路径
};

function Job(){
  return (
    <div className="jobList">
      {jobData.map((data)=>(
        <div className="job" key={data.id}>
          <div className="logo"> 
            <img src={logoMap[data.logo]} alt={data.company + " logo"}/>
          </div>
        </div>
      ))}
    </div>
  )
}

export default Job; 

方法2：用require.context批量导入 #

如果图片很多，手动导入太麻烦，可以用require.context批量读取文件夹里的图片，自动生成映射表：

import jobData from './data.json';

// 创建上下文，读取images文件夹下的所有svg文件
const logoContext = require.context('./images', false, /\.svg$/);
// 生成路径映射：键是json里的路径，值是图片资源
const logoMap = logoContext.keys().reduce((map, relativePath) => {
  // 把require.context返回的相对路径（比如./photosnap.svg）转换成json里的路径格式
  const fullPath = `./images/${relativePath.slice(2)}`;
  map[fullPath] = logoContext(relativePath).default;
  return map;
}, {});

function Job(){
  return (
    <div className="jobList">
      {jobData.map((data)=>(
        <div className="job" key={data.id}>
          <div className="logo"> 
            <img src={logoMap[data.logo]} alt={data.company + " logo"}/>
          </div>
        </div>
      ))}
    </div>
  )
}

export default Job; 

方法3：把图片放到public文件夹（Create React App适用） #

如果你用的是Create React App，可以把图片放到项目根目录的public/images文件夹下，然后修改json里的logo路径为绝对路径：

{
  "logo": "/images/photosnap.svg",
  // 其他字段...
}

然后组件里直接用data.logo作为src：

<img src={data.logo} alt={data.company + " logo"}/>

这种方式下，图片不会被Webpack处理，而是作为静态资源直接访问，所以动态路径也能生效。

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