input file 이미지 미리보기 표시

 

<input type="file" name="thumbnail" accept=".jpg, .jpeg, .png"  />
<img class="img_preview" src="<?=$row['image_path']?>" onerror="handleThumbnailError(this)"/>

1.URL.createObjectURL 이용

https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL

function handleThumbnail(el){
    var files = el.files;
    var preview = document.querySelector(".img_preview");
    preview.src = URL.createObjectURL(files[0]);
    preview.onLoad = function(){
        URL.revokeObjectURL( preview.src)
    }

   
}

주의점 : 같은 객체를 사용하더라도, createObjectURL()을 매번 호출할 때마다 새로운 객체 URL을 생성합니다. 각각의 URL을 더는 쓰지 않을 땐 URL.revokeObjectURL()을 사용해 하나씩 해제해줘야 합니다. 

2.FileReader 이용

https://developer.mozilla.org/ko/docs/Web/API/FileReader

function handleThumbnail(el){
    var files = el.files;
    var preview = document.querySelector(".img_preview");
    var reader = new FileReader();
    reader.onload = function(){
    preview .src = reader.result;
};
reader.readAsDataURL(files[0]);
}

ERR_OSSL_EVP_UNSUPPORTED

 nodejs를 16 버전에서 18버전으로 업그레이드 후 발생했음

npm이 안내 해준대로 아래의 명령어를  실행해봄

npm audit fix --force

오류 수정 되지 않음

 > 16버전으로 다운그레이드

리액트 빌드시 소스맵 없애기

 1. 프로젝트의 root에서 .env 파일을 만든다.

2.다음의 코드를 입력한다.

GENERATE_SOURCEMAP=false