React项目向对象数组插入图片显示为占位图标问题咨询

核心问题原因 #

你当前的写法没有正确处理src目录下的静态图片资源：React默认的构建工具（Webpack/Vite）不会识别直接写在对象字段里的纯字符串图片路径，打包时不会将对应图片处理到输出目录，导致浏览器无法加载资源，仅显示占位图标。 #

路径修复方案 #

方案1：静态导入图片（推荐，适合图片数量可控场景） #

先在存放pizza描述的文件中提前导入所有图片，再赋值给对象的image字段，构建工具会自动处理为正确的打包后路径。
修改后的Pizza.js代码：

// 路径替换为你实际存放图片的相对路径，示例假设图片存放在src/assets/images目录下
import bavarskaImg from '../assets/images/bavarska.jpg'
import salamiImg from '../assets/images/salami.jpg'

export let pizza_description = [
  { 
    id: 1,
    title: 'title 1',
    image: bavarskaImg
  },
  { 
    id: 2,
    title: 'title: 2',
    image: salamiImg
  }
]

此方案下Pizza_page组件的img标签无需修改，直接用el.image作为src即可正常渲染。

方案2：将图片放入public目录（适合图片数量多的场景） #

把所有披萨图片移动到项目public/images目录下，直接修改pizza_description里的image字段为/images/xxx.jpg即可，无需额外导入：

export let pizza_description = [
  { 
    id: 1,
    title: 'title 1',
    image: '/images/bavarska.jpg'
  },
  { 
    id: 2,
    title: 'title: 2',
    image: '/images/salami.jpg'
  }
]

新增、删除操作实现 #

修改Pizza_page组件添加对应逻辑，操作state时必须返回新数组才能触发重渲染：

import React, {useState} from "react";
import {pizza_description} from "../Food_description/Pizza/Pizza";
// 新增披萨的图片提前导入，用方案2的话此处可省略
import newPizzaImg from '../assets/images/new-pizza.jpg'

export let Pizza_page = () => {
  const [pizza, setPizza] = useState(pizza_description)

  // 删除逻辑：过滤掉对应id的项，返回新数组
  const deletePizza = (targetId) => {
    setPizza(prevList => prevList.filter(item => item.id !== targetId))
  }

  // 新增逻辑：拼接新对象到数组末尾，返回新数组
  const addPizza = () => {
    const newPizzaItem = {
      id: Date.now(), // 用时间戳作为唯一id即可
      title: '新增披萨',
      // 用方案2的话这里写'/images/新增披萨的文件名.jpg'
      image: newPizzaImg
    }
    setPizza(prevList => [...prevList, newPizzaItem])
  }

  return (
    <div>
      <button onClick={addPizza}>添加披萨</button>
      {pizza.map(el => (
        <div key={el.id}>
          {/* 必须加alt属性，避免控制台报可访问性警告 */}
          <img alt={el.title} src={el.image}/>
          <h1>{el.title}</h1>
          <button onClick={() => deletePizza(el.id)}>删除该披萨</button>
        </div>
      ))}
    </div>
  )
}

注意事项 #

• 若使用Vite构建工具，需要动态拼接图片路径时，采用new URL()写法：new URL('../assets/images/xxx.jpg', import.meta.url).href
• 不要直接修改state的原数组（比如用push、splice直接操作pizza变量），会导致组件不触发重渲染。

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