'Images are not displaying in webpage grid from uploaded image folder

I'm trying to make a memory match game using reactjs. I have my components and other files in src folder. index.html,style.css and image folder(img, with all images img folders are inside public folderto display on the grid) in public folder.All images in img folder is pngs.

I have to display these images in the grid , so I made a Card component for individual imagescard component and a cards component for the container. usestate and arraymap function is used to display these images.

When I first tried with just a string 'card' instead of bringing all images into the folder, it worked pretty well and it displayed 'card' in all grids. Then I imported the images folder and it's still showing the grids and its CSS properties, but the images are not loading into the display. I changed the number of images and with respect to that, the number of grids are changing, but the images are not displaying.

container is a class in cards component, and card class for card.js. I have no idea what am I missing in these codes.

javascriptcssreactjsuse-statearray-map


Solution 1:[1]

This should be the card component (See props instead of item) as the function parameter.

export default function Card(props) {
  return (
    <div className="card">
      <img src={props.item.img} alt="" />
    </div>
  );
}

Please do share the code as text and not images next time. Hope this was helpful.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ron Hillel

Related Questions