Image not displaying inside List, React

Question

I am creating a simple React component that displays images in a list/array.

The source is shown below:

import React from "react";
import styled from "styled-components";
import burgerTop from "../../assets/images/burgerTop.png";
import burgerBottom from "../../assets/images/burgerBottom.png";

const BurgerComponent = props => {
  console.log(JSON.stringify(props));
  const BurgerDiv = styled.div`
    width: 500px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
  `;
  return (
    <BurgerDiv>
      {props.burger.map(burgerItem => {
        console.log(burgerItem);
        const imgSrc = burgerItem.img;
        console.log(imgSrc);
        return <img key={burgerItem.id} src={imgSrc} />;
      })}
    </BurgerDiv>
  );
};

export default BurgerComponent;

Props are shown as below

{
  "burger":[
    {
      "type":"top",
      "img":"burgerTop",
      "value":1,
      "id":"sss2",
      "addable":false
    },
    {
      "type":"bottom",
      "img":"burgerBottom",
      "value":1,
      "id":"aaa7",
      "addable":false
    }
  ]
}

But the image path is not taken from import.

Not sure what I am doing wrong.

Please help.

user9408899 · Accepted Answer · 2020-03-02 08:45:10Z

1

img's source property should be a URL, or base64 string. Your burger prop doesn't have a source property like that.

I noticed that you are importing burgerTop and burgerBottom from assets folder. Maybe you can use those images like this:

{props.burger.map(burgerItem => {
        const imgSrc = burgerItem.img === "burgerTop" ? burgerTop : burgerBottom ;
        return <img key={burgerItem.id} src={imgSrc} />;
      })}

answered Mar 2, 2020 at 8:45

user9408899

4,5805 gold badges21 silver badges33 bronze badges

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

2 Comments

raju Over a year ago

But array will have few more images, and i will add it on top, than how will this solution work.

user9408899 Over a year ago

Try storing images' URLs in your prop.

Collectives™ on Stack Overflow

Image not displaying inside List, React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related