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.

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.

Kostas Minaidis · Accepted Answer · 2022-10-13 14:54:03Z

2

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.

edited Oct 13, 2022 at 14:54

answered Sep 30, 2022 at 14:34

Kostas Minaidis

5,6814 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Unmitigated · Accepted Answer · 2022-09-30 14:34:30Z

1

Use the <img> tag inside NaviIcon.

<img src={props.image}/>

answered Sep 30, 2022 at 14:34

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related