React에서 img 미리보기 적용하기

이전 포스팅에서 React에 img를 백엔드로 보내는 코드를 작성해보았다. 이번에는 이미지를 전송하기 전 사용자가 자신이 올린 이미지를 미리 볼 수 있도록 코드를 작성해보겠다. 코드 // 이미지를 넣는 코드에 추가 reader.onload = () => { setRegistrationInfo((registrationInfo) => { const newFileListL: any = [ ...registrationInfo.fileList, reader.result, ]; return { ...registrationInfo, fileList: newFileListL, }; }); }; reader.readAsDataURL(uploadFile); reader을 console에 찍어보면 base64로 변환된 이미지가 나온다. 이 데이터를 img 태그에 적용하면 이미지가 보인다. // 사용 <img src={registrationInfo?.fileList[0]} alt="Thumnail" wi...

원문링크 : React에서 img 미리보기 적용하기