[javascript] local image File path 로컬 이미지 미리보기 / fakepath

로컬 img 이미지파일을 input 태그 type="file" 를 이용하여 업로드시킬 때

fakePath 로 나와 url로 활용하기가 어려웠었습니다.

이때 input 태그의 onChange 함수에서 간단한 코드 추가로 쉽게 처리가 가능합니다.

 

아래 예제를 통해 확인해주세요.

 

{
	...
    const [imageUrl, setImageUrl] = useState();
    
    const loadImg = (event) => { 
        let value = URL.createObjectURL(event.target.files[0]); 
        setImageUrl(value);
    }
    ...
    return (
    	...
        
        <label for="profile">이미지를 선택하세요:
            <input type="file" name="image" onChange={(e) => loadImg(e)}/>
            <img src={imageUrl} name="viewimg" id="previewimg" alt="" style={{width:"50px", height:"50px", border:"1px solid black"}}/>
        </label>
        
        ...
    )