Vueで背景画像を設定するときのメモ

Nuxt( v2.4.0 ) + Vuetify( v1.5.5 ) でサイトを作成しているときに，背景画像が表示されなくてハマったのでメモ．

やりたかったこと

styleタグでDiv要素に背景画像(background-image)を設定したかった．

でも

<div class="bg" />

<style>
  .bg {
    background-image: url("/assets/foo.jpg");
  }
</style>

や，staticに画像を置いて

<div class="bg" />

<style>
  .bg {
    background-image: url("foo.jpg");
  }
</style>

とか他にもいろいろやってみても全部画像が表示できない・・・

解決方法

<div class="bg" />

<style>
  .bg {
    background-image: url("~@/assets/foo.jpg");
  }
</style>

でうまく表示されました！

それでは良いVueライフを👋