React.js分类商品页面图片无法显示问题求助

实现点击分类进入对应商品页面的功能后，页面中商品图片加载失败，但标题、价格等文字内容显示正常。

相关代码 #

MenuCategory 组件（商品列表页） #

import React from "react";
import { useParams } from "react-router-dom";
import { menu } from "../../Data";

const MenuCategory = () => {
  const { category } = useParams();

  function convertToSlug(text){
    return text.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g,'');
  }

  // 匹配URL参数对应的分类
  const selectedCategory = menu.find(
    (menuCategory) => convertToSlug(menuCategory.category) === category    
  );

  // 获取分类下的商品列表
  const categoryProducts = selectedCategory ? selectedCategory.products : [];
  console.log(categoryProducts);

  return (
    <>
      <div className="container">
        <h2>{category}</h2>
        <div className="row mt-5">
          {categoryProducts.map((asianFood, index) => (
            <div className="col-lg-4 col-md-4 col-sm-12" key={index}>
              <img src={asianFood.img2} alt="" onError={(e) => e.target.src = "/path-to-placeholder-image.jpg"} />
              <p>{asianFood.title}</p>
              <p>{asianFood.price}</p>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default MenuCategory;

路由配置 #

<Route path='/menu/:category' element={<MenuCategory />} />

菜单数据（Data.js） #

export const menu = [
  {
    category: "Asian Food",
    img: "images/menu/asianfusion-1-300x300.jpg",
    products: [
      {
        img2: "images/menu/Asian/blackpepperasian.jpg",
        title: "Black Pepper Asian",
        price: "1500",
      },
      {
        img2: "images/menu/Asian/chickenchillidry-300x300.jpg",
        title: "Chicken Chilli Dry",
        price: "1800",
      },
      // 更多亚洲菜品
    ],
  },
  {
    category: "Continental Food",
    products: [
      // 更多欧式菜品
    ],
  },
  // 更多分类
];

Menu 组件（分类列表页） #

import React from "react";
import { menu } from "../../Data";
import { Link } from "react-router-dom";

const Menu = () => {
  return (
    <>
      <div className="container">
        <h1>Menu</h1>
        <div className="row mt-5">
          {menu.map((category) => (
            <div className="col-lg-4 col-md-3 col-sm-12" key={category.category}>
              <Link to={`/menu/${category.category.toLowerCase().replace(/\s+/g, '-')}`}>
                <img src={category.img} alt="" />
                <p className="mt-3">{category.category}</p>
              </Link>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

export default Menu;

异常表现 #

<img src={asianFood.img2} alt="" onError={(e) => e.target.src = "/path-to-placeholder-image.jpg"} /> 无法加载图片，但 <p>{asianFood.title}</p> 和 <p>{asianFood.price}</p> 内容显示正常。

图片加载失败的核心原因是相对路径解析不符合React静态资源引用规则，可通过以下方式修复：

1. 修正public目录下图片的引用路径 #

若图片存放在项目根目录的public文件夹中，需给路径添加根目录前缀/，确保路径解析正确：

<img src={`/${asianFood.img2}`} alt={asianFood.title} onError={(e) => e.target.src = "/images/placeholder.jpg"} />

注意：替换/path-to-placeholder-image.jpg为实际存在的占位图路径，比如/images/placeholder.jpg

2. 导入src目录下的图片资源 #

若图片存放在src目录内（如src/assets/images），需先在数据文件中导入图片再使用：

// Data.js中导入图片
import blackPepperImg from './assets/images/menu/Asian/blackpepperasian.jpg';
import chickenChilliImg from './assets/images/menu/Asian/chickenchillidry-300x300.jpg';

export const menu = [
  {
    category: "Asian Food",
    img: "./assets/images/menu/asianfusion-1-300x300.jpg",
    products: [
      {
        img2: blackPepperImg,
        title: "Black Pepper Asian",
        price: "1500",
      },
      {
        img2: chickenChilliImg,
        title: "Chicken Chilli Dry",
        price: "1800",
      },
    ],
  },
];

组件中直接使用导入后的资源即可：

<img src={asianFood.img2} alt={asianFood.title} onError={(e) => e.target.src = "/images/placeholder.jpg"} />

3. 验证路径匹配 #

• 打开浏览器开发者工具（F12），查看Network标签中图片请求的状态，确认404错误的路径是否与实际文件位置一致
• 确保文件名大小写匹配（Linux系统区分大小写，如Asian和asian会被视为不同路径）

内容的提问来源于stack exchange，提问作者Hafiz Rabeet Ahmad