在React中渲染图像this.props

我有一个反应应用程序，我使用Create-React-App创建的。我的目标是当用户点击图像时，图像发生变化。所以，我希望图像来自道具。在React中渲染图像this.props

由于某种原因，此代码不起作用。

<img alt="mug shot" src={this.props.photo} />

然而，这个工程

<img alt="mug shot" src={require('../../Assets/Photos/Four.png')}/>

我在做什么错在这里？

来源

2017-10-14 Yoni Messing

我假设您使用Webpack捆绑您的应用程序。可能你可能使用了file-loader/url-loader来处理图像。因此，当您需要以图像文件扩展名结尾的内容时，webpack将通过该加载程序运行该文件的内容。欲了解更多信息，请https://survivejs.com/webpack/loading/images/

来源

2017-10-14 01:55:14

在你的情况，因为你想从道具获得的图像源，你可以简单地做'' mug shot '' –

您能不能告诉你this.props.photo还有什么？ –

class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
    img:'https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg' 
    } 

    this.changeImg = this.changeImg.bind(this); 
} 

changeImg() { 
    this.setState({ 
    img:'http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg' 
    }) 
} 

    render() { 
    return(
     <div> 
     <ImageChande change={this.changeImg} src={this.state.img} /> 
     </div> 
    ); 
    } 
} 


class ImageChande extends React.Component { 
    render() { 
    return(
     <div> 
     <img onClick={this.props.change} alt="something" src={this.props.src} /> 
     </div> 
    ); 
    } 
}

来源

2017-10-14 02:02:03

在React中渲染图像this.props

回答

相关问题