Next.js 파일 올리기 + 이미지 미리보기

김린네·2024년 1월 1일

이미지를 올리는 부분은 input 이다.

버튼을 누르면 useRef 으로 연결시켜서 input 이 눌리게 연결시켜놓았다.
input 으로 연결되어 이미지 링크를 누르면 이벤트 함수가 실행되어

파일의 주소를 읽으면 바로 onload 함수가 실행되어서 이미지의 경로를 usestate 으로
연결시킨다.
이미지에 src= { } 을 연결시켜서 이미지가 보이게 한다.

결과물

귀여운 푸바오가 연결되엇다.

profile
디자인 > https://dribbble.com/jongpil_77 코딩 > https://www.codewars.com/users/bikijjang

0개의 댓글