React无法加载本地图片，使用require函数触发语法解析错误求助

问题根源 #

你的代码存在两个核心问题：

1. 图片路径处理错误：直接传递未经过webpack处理的字符串路径，或是错误地将导入的图片变量包裹成对象
2. require使用语法错误：传入了对象而非字符串，导致语法解析报错

修正方案一：父组件提前导入图片（推荐） #

这种方式符合React+webpack的资源处理逻辑，webpack会在打包时自动处理图片资源，生成正确的访问路径。

修正后的NaviIconList.jsx #

import React from "react";
import NaviIcon from "./NaviIcon";
import "../navi.css";
// 提前导入所有需要的图片资源
import cart from "./images/shopping-cart.png"
import bell from "./images/user.png"
import user from "./images/user.png"

const image = [
  { image: cart }, // 直接使用导入的图片变量
  { image: bell },
  { image: user },
];

function NaviIconList (props) {
  return (
    <div id="NaviIconList">
      {image.map((item, index) => { // 避免变量名重复覆盖，改为item
        return (
          <NaviIcon key={index} image={item.image} /> // 加上key属性，符合React列表渲染规范
        );
      })}
    </div>
  );
}

export default NaviIconList;

NaviIcon.jsx保持原样即可 #

import React from "react";
import "../navi.css"

function NaviIcon (props) {
  return (
    <div id="NaviIcon">
      <img src={props.image} alt="" /> // 建议添加alt属性，提升页面可访问性
    </div>
  );
}

export default NaviIcon;

修正方案二：子组件中使用require加载 #

如果需要在子组件中动态加载图片，确保父组件传递字符串路径，且require的参数为字符串（不能是对象）。

修正后的NaviIconList.jsx #

import React from "react";
import NaviIcon from "./NaviIcon";
import "../navi.css";

const image = [
  { image: "./images/shopping-cart.png" }, // 传递字符串路径
  { image: "./images/user.png" },
  { image: "./images/user.png" },
];

function NaviIconList (props) {
  return (
    <div id="NaviIconList">
      {image.map((item, index) => {
        return (
          <NaviIcon key={index} image={item.image} />
        );
      })}
    </div>
  );
}

export default NaviIconList;

修正后的NaviIcon.jsx #

import React from "react";
import "../navi.css"

function NaviIcon (props) {
  return (
    <div id="NaviIcon">
      {/* require直接接收字符串路径，不要包裹对象 */}
      <img src={require(props.image)} alt="" />
    </div>
  );
}

export default NaviIcon;

关键注意点 #

• React项目中本地静态资源（图片、字体等）必须通过import或require引入，webpack会将其处理为正确的打包后路径
• 使用require时，参数必须是字符串（可以是变量，但不能是对象或其他类型）
• 列表渲染时一定要加上key属性，避免React控制台警告

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