React应用中通过props传递JSON图片路径，img标签无法显示

问题原因 #

在React项目里，直接用字符串形式的相对路径（比如./Assets/m1.jpg）作为<img>的src属性时，Webpack不会对其做静态资源解析和打包——哪怕控制台显示路径字符串是对的，实际资源也没被正确引入，导致图片无法渲染。

解决方案 #

方案1：用require动态加载图片 #

通过require让Webpack识别并处理静态资源，具体修改如下：

步骤1：简化JSON中的路径（可选）

把JSON里的image字段改成只存文件名：

let data = [
  {
    id: 1,
    name: "Striped Slim Fit Shirt",
    image: "m1.jpg", // 仅保留文件名
    price: 1000,
    category: "Men",
    size: "XL",
    inStock: true,
  },
  {
    id: 2,
    name: "Full Sleeves Slim Fit Shirt",
    image: "m2.jpg",
    price: 2000,
    category: "Men",
    size: "L",
    inStock: true,
  },
];
export default data;

步骤2：在组件中用require加载图片

在父组件HomePage里处理路径：

import { Fragment } from "react";
import data from "../../DUMMY_DATA";
import ItemList from "./ItemList";

const HomePage = () => {
  const availableItems = data.map((products) => (
    <ItemList
      key={products.id}
      id={products.id} // 补上之前缺失的id传递
      images={require(`../../Assets/${products.image}`)}
      name={products.name}
      price={products.price}
      category={products.category}
      size={products.size}
    />
  ));

  return (
    <Fragment>
      <div>{availableItems}</div>
    </Fragment>
  );
};
export default HomePage;

子组件ItemList直接使用处理后的路径：

import { Fragment } from "react";

const ItemList = (props) => {
  const { id, images, name, price, category, size } = props;
  return (
    <Fragment>
      <div className="container text-center">
        <div className="row row-cols-4" key={id}>
          <div className="col">
            <img src={images.default} /> {/* 注意添加.default */}
          </div>
          <div className="col">{name}</div>
          <div className="col">{size}</div>
          <div className="col">{price}</div>
        </div>
      </div>
    </Fragment>
  );
};
export default ItemList;

方案2：把图片放到public目录下 #

React项目的public文件夹里的资源会直接复制到打包后的根目录，无需Webpack解析，可通过根路径直接访问：

步骤1：调整文件结构

把Assets文件夹移到项目根目录的public文件夹下，结构变成：

你的项目/
├─ public/
│  └─ Assets/
│     ├─ m1.jpg
│     └─ m2.jpg
└─ src/

步骤2：修改JSON中的路径

将image字段改成根路径形式：

let data = [
  {
    id: 1,
    name: "Striped Slim Fit Shirt",
    image: "/Assets/m1.jpg", // 用根路径开头
    price: 1000,
    category: "Men",
    size: "XL",
    inStock: true,
  },
  {
    id: 2,
    name: "Full Sleeves Slim Fit Shirt",
    image: "/Assets/m2.jpg",
    price: 2000,
    category: "Men",
    size: "L",
    inStock: true,
  },
];
export default data;

此时子组件里的<img src={images} />就能正常渲染图片了。

额外注意事项 #

• 确保图片实际路径和代码里的路径完全匹配（包括大小写，部分系统会区分文件名大小写）。
• 之前父组件没给ItemList传递id属性，导致子组件里的key={id}无效，已经在方案1的代码里补上了。

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