JaeSeoKim
commented
1 year ago Kakao Map이 동작하는 시점은 Client 즉 browser에서 작동합니다. 즉 MapMarker에서 요구하는 src 주소는 브라우저에서 접근 가능한 주소여야 합니다. 일반적으로 개발할 때 작성하는 코드에 대해서 이미지 상대 경로로 작성하는 것은 bundler에서 이미지 경로에 대해서 처리를 해줄 수 없기 때문에, webpack의 file-loader와 같이 bundler에게 img 파일을 import 한다고 알려주고, bundling 과정을 통해 import 한 객체는 output으로 나오는 파일에 포함되며, 해당 output된 경로를 import한 객체로 가져올 수 있도록 변환하는 과정이 필요합니다.
즉. next.js에서 image를 불러와서 MapMarker의 src 주소로 사용을 할려면, import를 통하여 src를 정의 하는 방법(이때 next/image 컴포넌트에서는 import한 객체를 바로 src에 넣어도 된다고 하지만, 실제 import 된 객체는 object로 image.src로 사용해야 합니다. 참조1 참조2)과 또는 public 경로에 image를 넣고, 절대경로 형태로 직접 넣는 방법이 있습니다. 참조
안녕하세요. next.js 토이 프로젝트에서 react-kakao-maps-sdk를 이용하고 있는 사람입니다. 우선 좋은 라이브러리 만들어주셔서 간편하게 카카오맵을 잘 사용하고 있습니다.
다름이 아니라 MapMarker에서 이미지를 내부 이미지를 이용하고 싶어서 image의 src 값을 내부 파일 위치를 설정을 했었습니다. (절대 경로 상대 경로를 모두 설정을 하였었습니다.) 이미지가 404가 뜨네요... 혹시 src에 내부 이미지를 설정하는 방법을 알 수 있을까요?
감사합니다.