[Next.js] img 태그 src 경로 문제 (feat.public)

<img> 태그에 src를 설정해주는 방법에는 여러 가지가 있다.
public 안에 이미지를 넣고 import를 해주는 방법도 있고, public 안에 이미지를 넣고 src에 경로를 넣는 방법도 있다. 또, src 안에 이미지를 넣고 src=require('경로').default를 해주는 방법이 있다.

문제 발생

src에 경로를 정상적으로 입력했다고 생각했는데 계속 엑박으로 나온다.

해결 방법

src 내에 경로를 적을 때 public이 포함되어있다면 public를 적지 않는다.

물론, import 시에는 적어주어야 한다. next/image를 사용하는 것도 좋다.

public를 적지 않아야하는 것을 몰라서 시간을 엄청 허비했다.

https://nextjs.org/docs/basic-features/static-file-serving
Next.js는 이미지를 찾을 때 public를 root directory로 두기에 '/'로 취급한다고 이해하면 될 거 같다.