[FE] vite 환경에서 이미지 파일 배포 안 되는 에러

vue vite로 구현하고 배포했는데 이미지 파일이 쿠버네티스 환경에 올라가지 않는 에러 발생

---

증상

src 폴더에 파일은 있다.

 

 

 

 

이 파일을 코드에서 사용 중이다.

<div
  class="profile_img"
  :style="{
    backgroundImage: selectedPet?.profileImageUrl
      ? `url(${selectedPet.profileImageUrl})`
      : `url('/src/assets/images/default_profile.png')`,
  }"
></div>

 

로컬 환경

 

 

 

근데 배포 환경에 올리면 이미지가 배포 환경에 업로드되지 않는다.

 

아래 사진처럼 이미지 로드되지 않음 ㅠㅠ

쿠버네티스 배포 환경

 

쿠버네티스 파드에서 ls 명령어로 확인해봐도 나오지 않는다.

 

 

---

원인

Vite는 기본적으로 JS/TS/CSS에서 참조된 static 파일만 빌드 결과물에 포함한다.
그러나 아래처럼 JS 코드가 아닌 :style="..." 내부에서 문자열 조합으로 URL을 만들면, Vite는 이 파일을 사용한다고 판단하지 못하고 무시해버린다.

 

 

<div
  class="profile_img"
  :style="{
    backgroundImage: selectedPet?.profileImageUrl
      ? `url(${selectedPet.profileImageUrl})`
      : `url('/src/assets/images/default_profile.png')`,
  }"
></div>

즉, 이 default_profile.png는 "정적 리소스로 인식되지 않음".

 

 

---

해결 방법

public 폴더에 넣는 방법도 있지만, 나는 import로 파일을 참조해서 넣었다.

 

 

import로 참조하기

<script setup>
import defaultProfile from '/src/assets/images/default_profile.png'
</script>

<div
  class="profile_img"
  :style="{
    backgroundImage: selectedPet?.profileImageUrl
      ? `url(${selectedPet.profileImageUrl})`
      : `url(${defaultProfile})`,
  }"
></div>