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

Question

I made two files and my first file imported second file. But it cannot load my local images. It shows image like this

enter image description here

and to solve this problem I tried to use require function but when I used it, there is an error

[Parsing error: Unexpected token, expected ","]

this is 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;

and this is NaviIcon.jsx

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

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

export default NaviIcon;

finally, this is NaviIcon.jsx with require function

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

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

export default NaviIcon;

Answer 1

You don't need to import your images, just build an array of image paths and use it:

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

then rewrite this part:

 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> ); }

finally your NavIcon component will look:

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

Answer 2

If you remove {} from your variable name, it will be fixed. Also, don't forget to add key prop to make your array item unique. Your code should be:

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((image) => {
        return (
          <NaviIcon key={image} image={image.image} />
        );
      })}
    </div>
  );
}

export default NaviIconList;

Answer 3

Don't put {} everwhere

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

{user} is the same as { user: user }