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>
);
}
}
You need to import the image first and then either use it directly as value of
srcattribute onimgelement or pass it to some other component as a propnow either use
myImgdirectly as a value ofsrcattribute或将其作为道具传递