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}
/>