React中如何用map方法循环图片？解决路径无法解析报错

安全阿岳

2026-5-14

Hey，我来帮你排查下这个React项目里的问题，主要有几个关键点需要修正：

1. 图片路径错误（核心报错原因）

你写的.public/assets/images/是错误路径，问题出在两个地方：

开头多了一个.，而且相对路径的层级也不对；
更推荐用绝对路径访问public下的静态资源——React在构建时会把public文件夹的内容直接放到输出目录的根目录，所以直接写/assets/images/${images}.jpg就可以，既简洁又不容易出错。

另外，循环渲染的元素必须加key属性，这是React的强制要求，能避免渲染警告。修改后的Child.js循环部分代码：

const loopImages = imageShell.map(function (images, i) {
  return <img key={i} src={`/assets/images/${images}.jpg`} alt='imageLooping'></img>;
});

2. App.js组件命名不匹配

你在App.js里定义的组件函数名是Employers，但导出的是App，这会导致组件无法被正确识别，需要把函数名改成App：

import React from 'react';
import './App.css';
import Child from '../Child'; // 别忘了引入Child组件！你之前的代码里漏了这一行

function App() { // 这里从Employers改成App
  return (
    <div className='container-fluid'>
      <div className='row'>
        <div className='col-12'>
          <div className='Main'>
            <Child></Child>
          </div>
        </div>
      </div>
    </div>
  )
}
export default App

哦对了，你之前的App.js里还漏了引入Child组件，这个也要补上，不然会报Child未定义的错误。