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

Question

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.

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.

Answer 1

You need to replace the span with an img tag:

From this:

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

To this:

 <img src={props.image} />

And never forget the alt attribute whenever dealing with images. It's crucial for accessibility and UX.

Answer 2

Use the <img> tag inside NaviIcon.

<img src={props.image}/>