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ライフを👋