React Image not recognizing file path when passing data from parent component to child component

Question

When I'm passing the img src address to the child component and try to render the image, I keep getting an error which is

Error: Cannot find module './Assets/man-user.png'

this is the code for the parent component:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import {Icon} from './icons';

export class Body extends React.Component{
  constructor(props){
    super(props)
    this.state = {img :"./Assets/man-user.png", name : "About Me",alt : "profile"}
}   
render(){
    return <Icon img = {this.state.img} name = {this.state.name} alt = {this.state.alt}/>
};
}

Code for the child component

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';

const styles = {
    width : 310,
    height: 310,
    border: "solid black 5px",
    borderRadius: 83
};

export class Icon extends React.Component{

constructor(props){
    super(props);
    this.state = {name : '', open : 'false'};
};  

render(){
    return(
    <div style = {styles}>
        <img src =  {require(this.props.img)} alt = {this.props.alt}/>
        <h4>{this.props.name}</h4>
    </div>
    )}
 }

What am I doing wrong?

Try this: https://stackoverflow.com/questions/43823289/how-to-import-image-svg-png-in-a-react-component — wbd, Jan 05 '20 at 02:01
Having the path to an image file in `state` would not have the image data in it. So when passed as props this path may or may not be the same for child components. `import Manuser from './Assets/man-user.png';` and then store it state something like `this.state= {img: Manuser}`. Passing this as `state` should work. Give it a try. — Tarun Kolla, Jan 05 '20 at 02:19

React Image not recognizing file path when passing data from parent component to child component

0 Answers0