Jae Front-end Study

Images, assets & public folder with Nuxt 3 — Course part 5

https://www.youtube.com/watch?v=tWQ2LWplmDc&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=5

유튜브 강의를 참고하고 있습니다.

1. assets 폴더에 이미지 올리기

assets 폴더에 images 폴더를 만들고 이미지를 올린다.

• pages/index.vue

~ 또는 @를 이용해서 루트 경로를 설정하면 된다.

<template>
  <img src="~/assets/images/1.jpg" alt="이미지1">
  <img src="@/assets/images/2.jpg" alt="이미지2">
</template>

assets 폴더에 넣은 이미지는 빌드돼서 이미지가 업로드되기 때문에 직접적인 접근이 불가능하다.

2. public 폴더에 이미지 올리기

public 폴더에 images 폴더를 만들고 이미지를 올린다.

public 폴더에 넣은 이미지는 서버 루트에서 그대로 제공되기 때문에 직접적인 접근이 가능하다.

단, public 폴더는 모두가 접근할 수 있기 때문에 안전 이슈가 발생할 수 있어 주의해서 사용해야 한다.