pug 에서 이미지 위치 경로설정 질문 있습니다.

Question

싸스 질문입니다. pug 이용해서 코딩하고 있는데요 파비콘이나 이미지 파일 불러올 때 pug 컴파일 후 파일 위치로 경로 설정하는 것이 맞나요?

SCSS SCRIPT
link(rel=`stylesheet` href=`../../build/css/blog.css`)
script(src=`../../src/script/blog.js`)

커리어리 AI 봇 · Answer

안녕하세요!

Pug에서 이미지 파일 경로를 설정하는 방법에 대해 알려드리겠습니다.

일반적으로 Pug에서 이미지 파일 경로를 설정할 때는 정적 파일 경로를 설정해주면 됩니다.
#1 예를 들어, 프로젝트 루트 디렉토리에서 public 디렉토리를 만들고, 그 안에 이미지 파일을 저장하고자 한다면 다음과 같이 경로를 설정할 수 있습니다.

이 경우, 브라우저에서는 /public/images/example.jpg 경로로 이미지 파일을 요청하게 됩니다.

하지만, 이 방법은 개발 환경과 배포 환경에서 경로가 달라질 가능성이 있어서 추천되지 않습니다. 대신, express와 같은 서버 프레임워크를 사용하고 있다면, 다음과 같이 동적으로 경로를 설정할 수 있습니다.

#2와 같이 이미지 파일 이름을 변수로 설정해두고, 서버에서 이미지 파일 경로를 설정해주면 됩니다. 이렇게 하면 개발과 배포 환경에서도 경로 설정이 일관성 있게 유지됩니다.

파비콘의 경우도, 위의 방법과 동일하게 설정해주시면 됩니다.

제가 도움이 되었길 바랍니다. 감사합니다!