컴포넌트에서 이미지 넣기

[유용환]

컴포넌트에서 이미지를 넣으려고 하는데 
이렇게 넣어놓았는데 안나오고 상위폴더로 이동해서 입력하면 에러가 나오는데 컴포넌트에 이미지를 넣으려면 어떻게 해야하는
건가요

[codingapple]

이미지 넣는 방법은 한두개가아니라 이미지넣는법 강의를 참고합시다

[유용환]

이미지 넣는 강의에서 절대경로로 할때는 경로 전부를 넣고 상대경로를 입력할 때에는 assets에 넣고 ./경로 이렇게 되어있는데
src에 ./assets/경로 이렇게 했는데 Module not found: Error: Can't resolve
이런 오류가 나옵니다

[codingapple]

assets 폴더위치가 이상한게 아닐까요

[유용환]

assets폴더는 src폴더 안에 있습니다.
혹시 app.vue에 다른 컴포넌트를 만들었는데 라우터로 해서 router-view 태그로 원하는 위치에 놓고 만들어 놓은 다른 컴포넌트에
이미지를 넣으려고 하는건데 이것때문에 그런것이 아닐까요

[codingapple]

이미지넣으려는 컴포넌트가 src 말고 다른폴더에 있나봅니다 ./이건 현재경로라는 뜻입니다

[유용환]

그냥 ./ 붙이지 않고 이름.png이렇게 하면 이미지는 나오지 않고 이미지가 없을때 조그만한 네모 창같은 것이 나옵니다.
이미지는 assets폴더에 있고 컴포넌트는 컴포넌트 폴더에 있습니다.
assets 폴더와 컴포넌트 폴더가 같은경로에 있어서 이미지 src에 ../components/assets/이름.png
이렇게 적으면 에러가 나옵니다.

[codingapple]

경로는 무조건 ./ 부터시작하면 됩니다

[유용환]

이미지가 src폴더 안의 assets폴더 안에 있고 components폴더 안에 MainApp.vue라는 파일에 그 이미지를 불러오려고 하면
상위폴더인 components로 이동한 다음 같은 경로에 있는 assets폴더 안의 이름.png를 불러와야 하는거 아닌가요
<img src="../components/assets/start.png"
이렇게 해야 되는거 아닌가요

[codingapple]

./../assets/start.png 인듯요

[글쓴이]

글