Reactjs:为什么无法将 img 的 src 传递给 props？

Question

这个问题在这里已经有了答案:





react dynamic import using a variable doesn't work

(1 个回答)


去年关闭。




我路过一个 prop (其中包含一个字符串链接)到一个组件中。此 props然后在 <img /> 的 src 属性中使用但这会导致图像损坏。在不使用 import...from... 的情况下执行此操作的正确方法是什么？方法在我的组件的开头。下面的代码显示了我尝试过但不起作用的其他替代方案。

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

您需要先导入图像，然后将其直接用作 src 的值img 上的属性元素或将其作为 Prop 传递给其他组件

import myImg from '../../images/company-logo.png';

现在要么使用 myImg直接作为 src 的值属性

<img src={myImg}/> 

或将其作为 Prop 传递

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