React中如何从对象提取图片路径赋值给img标签的src属性？

你遇到的问题本质是React构建工具（Webpack/Vite）不会解析你写在普通字符串里的静态资源相对路径，这些路径在代码打包编译阶段不会被替换为最终的可访问资源地址，所以运行时浏览器找不到对应图片。

方案1：提前导入静态资源（全场景通用，最推荐） #

直接将图片作为模块导入后再赋值给数据的image字段，构建工具会自动处理资源路径：

// 先在组件顶部导入所有需要的图片
import FrozenImg from "../../assets/categories/Frozen.png";
import BabyCareImg from "../../assets/categories/BabyCare.png";
import BakeryImg from "../../assets/categories/Bakery.png";

// 修改常量的image字段为导入的变量，而非字符串路径
const DUMMY_DATA = [
  {
    name: "Frozen",
    image: FrozenImg,
    categories: [],
  },
  {
    name: "Baby Care",
    image: BabyCareImg,
    categories: [],
  },
  {
    name: "Bakery",
    image: BakeryImg,
    categories: [],
  },
]

原有渲染逻辑不需要做任何修改即可正常显示图片。

方案2：动态构造资源路径（Vite环境适用） #

如果你用Vite构建项目，可以通过new URL API动态生成资源路径，不需要提前挨个导入：

const categories = DUMMY_DATA.map((item) => {
  // 拼接图片文件名，注意替换名称里的空格和大小写匹配
  const imgName = item.name.replaceAll(" ", "");
  const imgUrl = new URL(`../../assets/categories/${imgName}.png`, import.meta.url).href;
  return (
    <li key={item.name} className={classes.category}>
      <img src={imgUrl} alt="category" />
      <span>{item.name}</span>
    </li>
  );
});

方案3：使用public目录托管静态资源 #

你可以把assets/categories整个文件夹移动到项目根目录的public文件夹下，直接使用绝对路径引用：

// 路径直接写public目录下的绝对路径，开头带/
const DUMMY_DATA = [
  {
    name: "Frozen",
    image: "/assets/categories/Frozen.png",
    categories: [],
  },
  {
    name: "Baby Care",
    image: "/assets/categories/BabyCare.png",
    categories: [],
  },
  {
    name: "Bakery",
    image: "/assets/categories/Bakery.png",
    categories: [],
  },
]

public目录下的资源不会被构建工具编译处理，会直接按路径原样暴露，所以可以直接引用。

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