画像はassetsとstaticに置くことができる。
assetsにおいた画像はwebpackに含められてbuildされるので、容量の大きなものは向かない。アイコンとか飾り程度向き。
写真など、普通にコンテンツとして画像を表示する場合などはstaticに。
assetsに置いた場合
assets以下に画像を格納して動的に参照する場合は以下のように記述する。
<img :src="require('~/assets/images/' + 変数名 + '.jpg')">
または
<img :src="require('@/assets/images/' + 変数名 + '.jpg')">
説明
通常、assets以下に格納した画像を静的に参照する場合、テンプレートには以下のように記述する
<img src="~/assets/images/sample.jpg">
こう書くとbuildの際に画像の有無が確認され、存在しない場合はエラーとなり、存在が確認できればパスに変換されて以下のような感じにbuildされる。
<img src="/_nuxt/assets/images/sample.jpg">
なので、以下のように書くといけるかと思いきや
<img :src=”‘~/assets/images/’ + 変数名 + ‘.png'”>
この書き方だと’~/assets/’の部分がテキストとして変換されずにそのままの文字列としてbuildされる。
<img src=”~/assets/images/201003_07.jpg”>
build後がこのパスだとjsから画像を参照できず、表示されない。
Nuxtで書く場合は以下のようにrequireで包めばOK。
<img :src="require('~/assets/images/' + 変数名 + '.png')">
staticに置いた場合
staticに置いた画像はドキュメントルートに配置されたものとして”/”からの相対パスで参照する。
<img src="/images/sample.png">
この場合の動的参照は以下のような感じで記述する。普通に。
<img :src="'/images/' + column + '.jpg'">