如何在React中展示存储在JSON文件中的图片资源

问题原因 #

你现有代码存在3个核心错误，导致图片无法正常加载：

1. 变量作用域错误：mainImage定义在Projects组件外部，此时无法获取组件传入的projectData props，变量值本身无效
2. 组件无返回值：函数组件内部没有显式return JSX元素，也没有使用隐式返回语法，组件本身不会渲染任何内容
3. 静态资源路径错误：直接拼接相对路径的图片地址，不会被React构建工具（Create React App/Vite等）识别处理，打包后静态资源路径和开发目录结构不一致，最终导致图片加载失败

解决方案 #

以下是两种常用的适配方案，按需选择即可：

方案1：使用public静态目录（推荐适配动态JSON场景） #

适合批量从JSON读取文件名的场景，无需单独导入每个图片：

• 把存储图片的images文件夹整体移动到项目根目录的public文件夹下
• 修改Projects.js代码如下：

const Projects = ({projectData}) => {
  // 变量定义在组件内部才能拿到传入的props
  // public目录下的资源直接用根路径访问，构建后路径不会失效
  const mainImage = `/images/${projectData.images.main}`
  // 必须显式return需要渲染的JSX
  return (
    <img 
      style={{ width: "100%" }} 
      src={mainImage} 
      alt={projectData.title}
    />
  )
}

方案2：动态引入src目录下的图片 #

如果你的图片存放在src目录下，不想放到public目录，可以用动态引入语法解决无法在组件内批量导入图片的问题：

• 如果你用Create React App搭建的项目，用require动态引入：

const Projects = ({projectData}) => {
  // 路径前缀写在require参数内，构建工具才能识别批量处理资源
  const mainImage = require(`../images/${projectData.images.main}`)
  return (
    <img 
      style={{ width: "100%" }} 
      src={mainImage} 
      alt={projectData.title}
    />
  )
}

• 如果你用Vite搭建的项目，用import.meta.glob批量引入：

// 提前批量匹配images目录下所有图片
const imageModules = import.meta.glob('../images/*.png', { eager: true })

const Projects = ({projectData}) => {
  const mainImage = imageModules[`../images/${projectData.images.main}`].default
  return (
    <img 
      style={{ width: "100%" }} 
      src={mainImage} 
      alt={projectData.title}
    />
  )
}

注意事项 #

• 如果JSON中存在空的图片文件名，建议加兜底判断，加载默认占位图避免报错
• 所有依赖props的变量必须定义在组件内部，才能正确获取传入的参数值

内容的提问来源于stack exchange，提问作者Gem Eliezer Espiritu