[떡국] 트러블슈팅 _ tailwind background image

넥스트를 사용한 테일윈드 백그라운드 이미지를 적용하려는데 

그냥 로컬에 저장된걸 바로 불러와서 사용하게되면 

 <div className={`w-96 bg-[url(/images/red.png)] bg-cover bg-center`}>

정상적으로 적용이 된다. 

참고로 이미지는 그냥 빨간색 저 자체이다. 

 

문제는 

      <div className={`w-96 bg-[url('/images/${떡국.테이블매트정보}')] bg-cover bg-center`}>

이렇게 했더니 아예 백그라운드 이미지가 뜨지를 않는다는 것이다. 

 

참고자료 : https://tailwindcss.com/docs/background-image

Background Image - Tailwind CSS

        <Image width={200} height={200} src={`/images/${떡국?.테이블매트정보}`} />

그래서 이미지로 잘뜨나 확인을해도 정상적으로 작동을 한다. 

 

그래서 저 떡국.테이블매트정보에 저장되어있는 값이 red.png여서 red로만 바꾸고 

      <div className={`w-96 bg-[url('/images/${떡국.테이블매트정보}.png')] bg-cover bg-center`}>

이렇게 적용해도 아무런 변화가 없었다. 

 

 

 

해결방법 : 

한솔님이 찾은거긴한데 

      <div className={`w-96 bg-[url(/images/${떡국.테이블매트정보}.png)] bg-cover bg-center`}>

이렇게 안에 '' 따옴표만 없이 적용하니까 이미지가 잘 먹히는걸 확인할 수 있었다..

 

그래서 왜..? 분명 docs에 나와있는대로 한건데 어째서 없애야 먹혔던건지 ..

 

일단 당장에 이유는 모르겠다 ㅠㅠ 아무리 블로그를 찾아봐도 docs에 나와있는대로 했을때 안되면 모듈에 추가해서 사용하라는 글들 뿐이였다.. 무튼 한솔님 짱짱맨 👍🏻👍🏻👍🏻👍🏻👍🏻

 

 

 

이유를 알아냄 이것도 솔님이 찾음 

`' ${} ' `

이렇게 했을때 백틱안에 따옴표가 있어서 그안에서 리터럴을 인식을 못한 것 같다. 

그래서 처음에 리터럴로 안쓰고 그냥 하드코딩했을땐 바로 적용된게 그 이유인듯 하다!!