[ Vue.js - Tailwind.css ] 클론코딩 결과 - 이미지 경로가 왜 안맞냐고..

안녕하세요 상훈입니다.

Vue.js + Tailwind.css 를 처음이용하여 클론코딩을 해보았는데, 결과를 포스팅하겠습니다.

 

핀터레스트(pinterest)를 클론코딩(clone coding) 했고, 해당 UI의 가장 기본적인 요소만 Vue.js로 코딩하였습니다.

Pinterest

 

기본적인 Vue.js의 지식을 갖고 있었기 때문에 vue 자체의 난이도는 적당하였고, 도움이 잘 되었습니다.

 

pinterest feed

 

그러나 왜인지 모르게 자꾸 image의 경로가 안잡혔고, 결과적으로도 잡지 못하였습니다. (아예 width, height 없음)

따로 <img src="./assets/1.jpg"> 이렇게 주었을 때는 또 잘 작동하더라구요. 왜냐고.

 

 

아래의 모든 항목이 Component를 통해 참조는 되었는데, class가 적용이 안된건지 이해를 못하겠군요..

해당 컴포넌트는 아래와 같이 mouseover, mouseleave에 해당하는 경우의 값을 주었는데 말이죠.

@mouseover="hover = true" @mouseleave="hover = false"

기본으로 false를 주었는데 작동하지 않네요.

 

왜일까유 v-if으로 주었어야하나?? 이게 뭐람 ㅋㅋㅋ

tailwind 해보니까 클래스명이 직관적이어서 좋았습니다. 

부트스트랩의 클래스명보다 좀 더 좋다고 느껴졌어요. 다만,,, 적용하는 과정이 조금 까다로웠어요.

cdn으로 하면 편했을텐데 해당 cdn 없이 설치로 진행하였습니다.

 

tailwind.css cdn.

 <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">.

 

 

 

강의

 

참고

v-bind:src에서 이미지를 불러오지 못할때