React 无法加载我的本地图像，如果我使用 require 函数，则会出现错误答案

【问题标题】：React can't load my local image and if I use require function, there is an errorReact 无法加载我的本地图像，如果我使用 require 函数，则会出现错误
【发布时间】：2022-10-01 00:15:10
【问题描述】：

我制作了两个文件，我的第一个文件导入了第二个文件。但它无法加载我的本地图像。它显示这样的图像

enter image description here

为了解决这个问题，我尝试使用 require 函数，但是当我使用它时，出现错误

[解析错误：意外的令牌，应为\",\"]

这是 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 : \"./images/shopping-cart.png\"
  },
  {
    image : {bell}
  },
  {
    image : {user}
  },
];

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

export default NaviIconList;

这是 NaviIcon.jsx

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

function NaviIcon (props) {
  return (
    <div id=\"NaviIcon\">
      <img src={props.image} />
    </div>
  );
}

export default NaviIcon;

最后，这是带有 require 函数的 NaviIcon.jsx

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

function NaviIcon (props) {
  return (
    <div id=\"NaviIcon\">
      <img src={require({props.image})}/>
    </div>
  );
}

export default NaviIcon;

标签： javascript reactjs

【解决方案1】：

您不需要导入图像，只需构建图像路径数组并使用它：

const imgs = [
   "./images/shopping-cart.png",
   "./images/user.png",
   "./images/user.png"
]

然后重写这部分：

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


// to:

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

最后，您的 NavIcon 组件将如下所示：

function NaviIcon (props) {
  return (
    <div id="NaviIcon">
      <img src={props.image}/>
    </div>
  );
}

【讨论】：

【解决方案2】：

不要到处放{}

const image = [
  {
   image : "./images/shopping-cart.png"
  },
  {
    image : bell
  },
  {
    image : user
  },
];

{user} 与 { user: user } 相同

【讨论】：