Nuxt 画像のパスの書き方三傑

• 画像の置き場所
• 書き方
  複数人のプロジェクトの場合は開始前に決めたほうがよいかも。

その1 imgタグ

assets/img/の中に画像ファイルを入れている場合

demo.vue

<img src=“@/assets/img/画像ファイル名”>

static/img画像ファイルの場合

demo.vue

<img src=“/img/画像ファイル名”>

その2 cssの背景画像

assets配下の場合

demo.css

background-image: url("~@/assets/img/画像ファイル名">

static配下の場合

demo.css

background-image: url("/img/画像ファイル名">

その3 v-bindで変数として使う場合

requireで囲む必要がある。

demo.vue

data: function(){
  return {
    imgSrc: require('@assets/img/画像ファイル名’)
  }
}