Footer 항상 맨 밑에 두기

넉스트에서 동적 이미지 바인딩 사용하기

img 태그에 src='url'로 놓고 data에 url: '~/assets/img/home.png'라 하면 '<http://xxx.xxx.xxx/~/assets/img/home.png'라고> 뜨면서 이미지 경로를 찾을 수가 없다.

안 되는 코드

<template>
  <img :src="url" alt="photo" />
</template>

<script>
import TitleBasic from '@/components/basic/TitleBasic.vue'
import { userObj } from '@/api/test'

export default {
  data() {
    return {
      url: '~/assets/img/vue_logo.png',
    }
  },
}
</script>

뷰나 넉스트 모두 웹팩에 의해서 static asset들을 관리하게 된다.

How to load dynamic images in Vue and Nuxt with ease