看起来你遇到了React里用map渲染本地图片不显示的问题——虽然控制台日志输出都符合预期，但图片只显示空白图标对吧？我之前也踩过类似的坑，大概率是图片路径的解析逻辑出了问题，咱们一步步排查解决：

1. 先确认本地图片的引用方式是否正确 #

React对本地静态资源的处理有两种标准方式，用错了就会导致资源找不到：

方式一：从src目录导入图片（推荐）

如果你的图片存在src/assets这类子目录下，必须先通过import导入资源，再把导入的变量传给img的src属性：

// 先导入单张测试用的棒球图
import baseballImg from './assets/baseball.png';

// 然后在map循环里使用
this.state.sports.map(sport => (
  <img 
    key={sport.id} // 别忘了加唯一key，避免React控制台警告
    src={baseballImg} 
    alt={sport.name} 
  />
))

等后续要加其他运动图片时，可以用对象映射来匹配不同运动：

// 先批量导入所有需要的图片
import baseballImg from './assets/baseball.png';
import basketballImg from './assets/basketball.png';

// 创建运动名和图片的映射关系
const sportImageMap = {
  baseball: baseballImg,
  basketball: basketballImg
};

// 渲染时根据运动名匹配对应图片
this.state.sports.map(sport => (
  <img 
    key={sport.id}
    src={sportImageMap[sport.name.toLowerCase()]} 
    alt={sport.name} 
  />
))

方式二：使用public文件夹的绝对路径

如果图片放在项目根目录的public文件夹里（比如public/images/baseball.png），那么src需要写绝对路径（以/开头）：

this.state.sports.map(sport => (
  <img 
    key={sport.id}
    src={`/images/${sport.name.toLowerCase()}.png`} 
    alt={sport.name} 
  />
))

这种方式不需要导入，但要确保路径和public里的文件结构完全一致，包括文件名的大小写（系统区分大小写的话，Baseball.png和baseball.png会被当成两个文件）。

2. 验证实际渲染的路径是否正确 #

虽然控制台日志显示路径没问题，但可以打开浏览器的「Elements」面板，查看渲染后img标签的src属性：

• 如果显示[object Module]，说明你用了ES模块导入但没正确处理（用Create React App的话不会出现这个问题，优先用第一种导入方式即可）
• 如果路径是相对路径但返回404，说明相对路径的基准不对（比如组件文件和图片不在同一目录，这时候调整相对路径或改用导入方式更稳妥）

3. 最后检查图片本身 #

确认图片文件没有损坏，文件名（包括后缀）和代码里写的完全一致，比如别把.png写成.jpg了。

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