【Nuxt.js v2】ファイル参照の方法(assets, static)

static配下

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

assets配下

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

コンポーネントにassets配下のパスを渡す場合

コンポーネントに渡す場合、そのまま渡すと'@/assets/images/sample.png'というただの文字列として認識されてしまいます。
正しくファイルを読み込ませるためには、Nuxtのローダーの機能によって、@/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>

dataに格納せず、プロパティに直接記述してもよい。

<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フレームワークが提供している画像用のタグ(<v-img>)も、assetsのパスをそのまま渡した場合には画像が表示されません。それは単なるimgタグではなく、コンポーネントであるためです。