Next.js 이미지 파일 연결시키기 + 미리 보기

김린네·2024년 1월 1일

글쓴거 날아감..하 ㅋ

input 으로 파일을 넣을수 있는 html 을 생성한다.
ref 을 걸어준 이유는 > 새로 버튼을 생성해서 . 버튼이 눌린경우에만
실행하는 식으로 만들었다.

onchange 함수를 사용하여 파일이 변경되면 change_file 함수가 실행되게 만든다.

파일의 주소를 이벤트 함수 .target 으로 불러온뒤
파일reader 를 이용해서 v파일의 경로 URL 를 읽는다.
fileReader 가 실행될때 .onload 가 자동으로 실행되어서
파일의 경로를 usestate 훅에다가 연결시킨다.

이제 이미지에다가 src을 연결하면 된다.

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

0개의 댓글