在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

回答

相關問題