React开发购物车时图片src显示为数字的问题求助

先给你捋一遍正确的组件写法，再指出你大概率踩的坑：

1. 修正FeaturedGamesList.js #

确保正确导入图片并导出数组——React中导入的图片是webpack处理后的有效路径，不是普通字符串：

// FeaturedGamesList.js
import game1 from '../assets/game1.jpg'; // 替换成你的实际图片路径
import game2 from '../assets/game2.jpg';
import game3 from '../assets/game3.jpg';
import game4 from '../assets/game4.jpg';
import game5 from '../assets/game5.jpg';

export const featuredImages = [game1, game2, game3, game4, game5];

2. 修正FeaturedGames.js #

这里要把图片数组的项正确绑定到对象的src属性，别直接写数字索引：

// FeaturedGames.js
import { featuredImages } from './FeaturedGamesList';

export const featuredGames = [
  { id: 1, title: '游戏标题1', src: featuredImages[0] },
  { id: 2, title: '游戏标题2', src: featuredImages[1] },
  { id: 3, title: '游戏标题3', src: featuredImages[2] },
  { id: 4, title: '游戏标题4', src: featuredImages[3] },
  { id: 5, title: '游戏标题5', src: featuredImages[4] }
];

3. 修正Featured.js的遍历逻辑 #

遍历必须读取对象的src和title属性，别把数组索引当成图片路径，同时给alt设置字符串值：

// Featured.js
import { featuredGames } from './FeaturedGames';

const Featured = () => {
  return (
    <div className="featured-section">
      <h2>Featured</h2>
      <div className="featured-grid">
        {featuredGames.map(game => (
          <div key={game.id} className="featured-item">
            <img src={game.src} alt={game.title} />
            <p>{game.title}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Featured;

你可能踩的错误点： #

• 在FeaturedGames.js里，直接把数字（比如0）赋值给了src，而非引用featuredImages[0]；
• 遍历的时候误将数组索引参数当作src，比如写了(game, index) => <img src={index} />；
• alt属性没设置成字符串，比如写了alt={game}导致显示[object Object]。

按上述写法调整后，图片就能正常加载，alt文本也会显示正确的标题。

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