React项目中从对象数组映射渲染图片显示损坏的问题求助

嗨，我看了你的代码，发现图片显示损坏的问题根源很明确——你数组里的图片路径写法不一致，而且直接用根相对路径在React项目里是有坑的！

先拆解下你的问题：在arrayForList数组里，第一个披萨图片是通过import pizzaImg from './images/Pizza-thick.png'引入的，这种写法会让Webpack正确处理图片资源，打包时生成正确的访问路径；但剩下的汉堡、饺子等图片，你直接写了src: '/images/Burger.png'这类路径，浏览器会把它当成域名根目录下的路径去查找，自然找不到本地src/images里的图片，所以显示损坏。

给你两个简单的解决办法，选一个就行：

方法一：统一用import引入所有图片 #

把所有图片都像披萨那样先import进来，再放到数组里，这是React项目处理本地图片的标准方式：

import pizzaImg from './images/Pizza-thick.png';
import burgerImg from './images/Burger.png';
import momoImg from './images/Momo-food.png';
import hotdogImg from './images/Hotdog.png';
import chickenBurgerImg from './images/Chicken-Burger.png';
import setFoodImg from './images/Set-of-food.jpeg';

export const arrayForList = [
  {   
    name: "Pizza",
    src: pizzaImg,
    id: 1,
    price: 5,
  },
  {  
    name: "Burger",
    src: burgerImg,
    id: 2,
    price: 5,
  },
  {  
    name: "Momo",
    src: momoImg,
    id: 3,
    price: 5,
  },
  {  
    name: "Hotdog",
    src: hotdogImg,
    id: 4,
    price: 5,
  },
  {  
    name: "Chicken-Burger",
    src: chickenBurgerImg,
    id: 5,
    price: 5,
  },
  {  
    name: "Chicken-Pizza",
    src: pizzaImg,
    id: 6,
    price: 5,
  },
  {  
    name: "Dominos",
    src: pizzaImg,
    id: 7,
    price: 5,
  },
  {  
    name: "McDonald Special",
    src: setFoodImg,
    id: 8,
    price: 5,
  }
]

Webpack会在打包时把这些图片复制到输出目录，并自动生成正确的访问URL。

方法二：用require()动态加载图片 #

如果不想一个个手动import，也可以在数组里用require()来动态获取图片路径，注意路径要写成相对于当前文件的相对路径（./images/xxx），而不是根路径：

export const arrayForList = [
  {   
    name: "Pizza",
    src: require('./images/Pizza-thick.png'),
    id: 1,
    price: 5,
  },
  {  
    name: "Burger",
    src: require('./images/Burger.png'),
    id: 2,
    price: 5,
  },
  {  
    name: "Momo",
    src: require('./images/Momo-food.png'),
    id: 3,
    price: 5,
  },
  // 剩下的对象依次替换成这种require写法即可
]

另外再检查两个细节：

• 确认images文件夹确实在src目录下，文件名和扩展名没有写错（比如.jpeg和.jpg不要搞混，Linux/macOS环境下文件名大小写是敏感的）；
• 你提到的计数器功能没关系，先把图片问题解决，之后再拆分组件也完全来得及～

备注：内容来源于stack exchange，提问作者VXVNII