コンポーネントにassetsを渡してみる

まず実験用に、この↓ようなコンポーネントを用意します。

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

<script>
export default {
  props: ['src']
}
</script>

先ほどと同様に<img>の「src」を指定するだけのコンポーネントです。 名前は「<test />」としましょう。

「test」コンポーネントに、先ほどと同様にsrcにassets以下のファイルを指定します。

<test src="~/assets/img/logo.jpg">

ビルドされたHTML↓。

<img src="~/assets/img/logo.jpg">

コンポーネントは正常に展開されましたが、srcがそのままになっています。 これでは正しく画像を読み込んでくれません。

コンポーネントに正しくassetsを渡す方法

Nuxt.js公式の説明を見ていると、

それは require('~/assets/image.png') に変換されます。

とあります。

じゃー先に自分で変換してやれと、

<test :src="require('~/assets/img/logo.jpg')" />

自分でrequireを指定します。

定数ではなくなるので「src」はv-bindにして「:src」としています。

出力結果↓。

<img src="/_nuxt/assets/img/logo.jpg">

うまくいきました。

まとめ

Nuxt.jsのコンポーネントにassets以下のファイルを渡す場合は、先に手動でrequireしてやればいいようです。

<test :src="require('~/assets/img/logo.jpg')" />

ちなみに、staticの方はこんなことしなくても普通に読み込めます。