Reactjs: why img's src cannot be passed to props? [duplicate] - reactjs

Question

This question already has an answer here:
react dynamic import using a variable doesn't work
(1 answer)
Closed 2 years ago.
I am passing a prop (which contains a string link) into a component. This props is then used inside the src property of <img /> but this causes a broken image instead. What is the correct way of doing this without using the import...from... method in the beginning of my component. The code below shows other alternatives that i tried which dont work.
class Entry extends React.Component {
render() {
const link = '../../images/company-logo.png';
const image = require(link); //error: cannot find module
const imagee = require('../../images/company-logo.png'); //works fine, but not ideal
return (
<div className="entry">
<img src={this.props.imageLink}/> //results in a broken image
<img src={link}/> //results in a broken image
<img src={imagee}/> //works fine
</div>
);
}
}

Answer 1

You need to import the image first and then either use it directly as value of src attribute on img element or pass it to some other component as a prop
import myImg from '../../images/company-logo.png';
now either use myImg directly as a value of src attribute
<img src={myImg}/>
or pass it down as a prop
<div className="entry">
<SomeComponent img={myImg} />
</div>

Answer 2

Actually you can pass image src via props but some where you have to import it. You have to do that because React projects mostly use Webpack to build the code and the images also be built with JS code.
I know there are 2 options which might help you solve this problem.
Import image from Parent Component and pass it to the child one:
import Image from '../images/image-01.png';
function ParentComponent {
return <ChildComponent img={Image} />;
}
function ChildComponent(props) {
return <img src={props.img} />;
}
Import all images inside a folder and use it as an image dictionary by using require.context:
function importAll(r) {
return r.keys().map(r);
}
const images = importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/));
function ChildComponent(props) {
const link = 'image-01.png'; // or link = props.parentLink;
return <img src={images[link]} />;
}
You could find more information about option 2 in this answer.
Hope it could help you solve your problem.