fakepath local image File path 로컬 이미지 미리보기 / createObjectURL - javascript

---

fakepath local image File path 로컬 이미지 미리보기

---

오류

로컬 img 이미지파일을 input 태그 type="file" 를 이용하여 업로드시킬 때 해당 경로가 fakePath 로 나와 url로 활용하기가 어려웠었습니다.

type="file"일 경우 fakepath로 나오는 현상

이 경우 아래와 같이 이미지 썸네일을 받아오는 경우에도 문제가 발생하였습니다.

 

해결방법

이때 input 태그의 onChange 함수에서 URL.createObjectURL 를 추가하여 간단하고 쉽게 처리가 가능합니다.

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

{
	...
    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>
        
        ...
    )