How can I insert an image in this map function code by React?-CodePudding

I'm building imagebox by using map function but don't know how to connect two files. It doesn't show the image, it just shows the direction of the image.

view shows like this

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

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

export default NaviIcon;

I imported this file to below file

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

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

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

export default NaviIconList;

it works well if the items of array are not images.

CodePudding user response：

You need to replace the span with an img tag:

From this:

 <span>{props.image}</span>

To this:

 <img src={props.image} />

CodePudding user response：

Use the <img> tag inside NaviIcon.

<img src={props.image}/>