React Js:为什么img src无法通过props?

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 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}/> 
    

    或将其作为道具传递

    <div className="entry">
       <SomeComponent img={myImg} />                                               
    </div>