Image is not loading into react

Question

I want to load an image using react props from its parents but I can't load the image using props. The page was blank other field like image caption and button on in the div is visible but image is empty. I am using evergreen-ui for styling. Parent Class:

class Trending extends Component {
constructor() {
  super();
 this.state = {
  images: [
    {
      id: "1",
      img_name: "liverpool-1",
      heading: "Nike Football Impulse Pack",
    },
    {
      id: "1",
      img_name: "shoe-1",
      heading: "Nike Football Impulse Pack",
    },
  ],
};
}

render() {
 return (
   <Pane>
     <Pane>
       <Heading
        size={1400}
        color="#111"
        marginLeft={20}
        marginRight={20}
        paddingTop={10}
        paddingBottom={20}
        fontWeight={500}
        fontFamily="Helvetica Neue|Helvetica|Arial|sans-serif">
        Trending
       </Heading>
       <Pane
        display="flex"
        position="relative"
        marginLeft={20}
        marginRight={20}>
         {this.state.images.map((image) => (
           <ImageButton
             id={image.id}
             img_name={image.img_name}
             heading={image.heading}
           />
         ))}
       </Pane>
     </Pane>
   </Pane>
  );
  }
}

export default Trending;

Child Class:

class ImageButton extends Component {
constructor(props) {
super(props);
this.state = {
  images: [
    {
      img_name: "",
      heading: "",
    },
  ],
  };
}

   render() {
     return (
      <Pane className="img-container" marginRight={5}>
      <img
       src={require("../assets/images/" + this.props.img_name + ".png")}
       alt=""
      />
      <Pane className="btn-txt">
      <Heading size={600} className="txt">
        {this.props.heading}
      </Heading>
      <Button className="btn"> Shop </Button>
    </Pane>
  </Pane>
);

} }

export default ImageButton;

Answer 1

Example from create-react-app website

import React from 'react';
import logo from './logo.png';

function Header() {
 // Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}

export default Header;

If you have condition in you images just use string interpolation.

<img src={`../assets/images/`${this.props.img_name}.png`)}/>

Also make sure to check relative path of your image.