Display images dynamically using map() in react not working

Question

I want to display images in the sports array using map(). but not working

<div className="row">
   {this.state.sports.map(function(sport, index){
     return (
     <div className="col-md-3" key={index}>
       <h3 className="text-center">{this.state.sports.name}</h3>
       <img src={ require('./../assets/images/'+ {this.state.sports.name} +'.jpg') } width="300px" height="180px" />
       <button className="btn btn-info btn-sm" type="submit" onClick={this.join_in_sport} >JOIN</button>
     </div>
    )
  }.bind(this))}
</div>

you are iterating this.state.sports so it is an Array. later you do this.state.sports.name this will be undefined in img DOM. — Cyril Cherian
– Cyril Cherian, Commented Nov 17, 2017 at 12:26

Chris · Accepted Answer · 2017-11-17 12:25:04Z

The problem seems to lie in how you are building the pathname for your image. Same for your <h3> tag.

src={ require('./../assets/images/'+ {this.state.sports.name} +'.jpg') }

If this.state.sports is an array, and not an object, then it can't possibly have a name key. I think you meant to print the current objects name for each iteration in your map().

So try:

<h3 className="text-center">{this.state.sports.name}</h3>
<img src={ require('./../assets/images/'+ {sport.name} +'.jpg') } width="300px" height="180px" />

This is assuming your array looks something like:

[
  {name: "foo"},
  {name: "bar"}
]

Sofiyan Ben_Z · Accepted Answer · 2021-12-29 16:29:51Z

I have encountered the same problem, the image folder in src doesn't work. I moved the image folder to public and it works fine.

function App() {
  

 
  const moviesData = [
  
      name: "Terminator: Dark Fate",
      img: "./badboy3.jpg", //image in public folder
    },
  ];

  const movieList = moviesData.map((movie, i) => {
    return <Movie key={i} movieName={movie.name} movieImg={movie.img} />;
  });

  return (
    <div>
  
     {movieList}
     
    </div>
  );
}

export default App;

Chitambala Sikazwe · Accepted Answer · 2022-12-01 09:24:09Z

I was following the React beginners tutorial tried to call images dynamically by importing them as variables but this simply didn't work when trying to call them in another file (App.js) using the .map() function. Code below:

import katieImg from "../images/Katie.png"; import starImg from "../images/Katie.png";

export default [
  {
    img: { katieImg },
    star: { starImg },
    rating: "5.0",
    reviewCount: 6,
    location: "USA",
    title: "Life Lessons with Katie Zaferes",
    price: 136,
  },
];

So instead I had to get rid of the dynamically imported variables and put the images folder in the public folder. This worked. Code below:

export default [
  {
    img: "../images/Katie.png",
    star: "../images/Star.png",
    rating: "5.0",
    reviewCount: 6,
    location: "USA",
    title: "Life Lessons with Katie Zaferes",
    price: 136,
  },
];

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Display images dynamically using map() in react not working

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related