🐞background-Image 경로 설정 오류

[chowonn]

[Bug] : 배경 이미지의 경로 설정 에러

Description

• h1 태그에 배경 이미지를 넣기 위해 아래와 같이 이미지 경로를 설정했으나, 배경 이미지를 불러오지 못하는 에러 발생.

<h1 class= "bg-[url('./assets/images/viewing.svg')]"></h1>

---

• 배경 이미지 경로를 설정할 때 vscode 내에서 자동완성을 통해 이미지 경로를 설정한 부분이 원인으로, 배경 이미지 설정 시 css파일에서 경로를 설정해줬는데 프로젝트 내에서 tailwind css 를 사용하면서 class에 스타일을 주게 되니 main.css 기준으로 경로를 맞춰줬어야 했습니다.

• 화면에 랜더링 될 때는 main.css로 변환 된 파일로 설정되므로 main.css 파일을 기준으로 이미지 경로를 재설정 해주었더니 해결되었습니다.

• 이미지가 정상적으로 뜨고 main.css로 제대로 변환되어 랜더링 되는 것을 확인할 수 있습니다.

main.css 파일 기준 경로

<h1 class= "bg-[url('./../assets/images/viewing.svg')] bg-auto bg-no-repeat"></h1>