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