[Nuxt.js] 파일 참조 방법(assets, static)

부하

<img src="/images/sample.png" />

assets 부하

<img src="@/assets/images/sample.png" />

assets 산하의 경로를 구성 요소에 전달할 때

어셈블리에 직접 전달하면 됩니다.png'은 문자열일 뿐입니다.
파일을 정확하게 읽기 위해서는 @/assets/경로가 해결된 상태에서 구성 요소에 전달할 수 있는 스크롤 바 기능이 필요합니다.
(해결의 결과는'/nuxt/assets/images/sample.png'이다.)
다음 구성 요소를 사용하여 이미지 파일의 경로를 수신할 수 있습니다.
/components/MyComponent.vue

<template>
  <div>
    <img :src="path" />
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: String,
      required: true
    }
  }
}
</script>

구성 요소를 사용하는 쪽에서 Require ()로 assets의 경로 상태를 해결하여 하위 구성 요소에 전달하여 파일을 정확하게 읽을 수 있습니다.

<template>
  <div>
    <MyComponent :path="path" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      path: require('@/assets/images/sample.png')
    }
  }
}
</script>

데이터에 저장되지 않거나 속성에 직접 기술할 수 있다.

<MyComponent :path="require('@/assets/images/sample.png')" />

require 대신 다음과 같이 import을 사용할 수 있습니다.

<script>
import path from '@/assets/images/sample.png'
export default {
  data () {
    return {
      path: path
    }
  }
}
</script>

※ Vuetify 등 UI 프레임워크에서 제공하는 이미지용 라벨()도 assets 경로를 직접 전달할 때 이미지를 표시하지 않습니다.그것은 단순한 라벨이 아니라 구성 요소이다.