this.propsからの画像のレンダリング

Question

私はCreate-React-Appで作成した反応アプリケーションがあります。私の目的は、ユーザーが画像をクリックすると画像が変化することです。だから、私は画像が小道具から来るようにしたい。

何らかの理由で、このコードは機能しません。

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

しかし、これは動作します私はここで間違って

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

何をしているのですか？

Answer 1

Webpackを使用してアプリをバンドルしているとします。おそらく、画像を処理するためにファイルローダー/ URLローダーを使用している可能性があります。したがって、イメージファイルの拡張子で終わるものが必要な場合、webpackはこのローダーを通してそのファイルの内容を実行します。詳細については、お使いの場合にはhttps://survivejs.com/webpack/loading/images/

Answer 2

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> 
    ); 
    } 
}