11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-05-17

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

11
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?