React에서 Input의 Image Preview 구현하기
26 Apr 2020 | programming webReact에서 input 팝업에서 이미지를 가져온 후 미리보기 이미지를 구현하는 법은 다음과 같다.
Image 컴포넌트는 semantic ui react의 것을 사용하였다.
import { Image } from 'semantic-ui-react' <Image src={this.state.imageUrl} size='small' /> <input type='file' label='Upload' accept='.png' onChange={(event)=>{ this.setState({...this.state, imageUrl: window.URL.createObjectURL(event.target.files[0]), }); }} ref={(ref) => this.fileUpload = ref} />