0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vue3で背景画像が設定できない

Posted at

Vueにてbackground-imageで背景画像を指定

<template>
  <div class="hoge">
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>

<style scoped>

.hoge{
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/images/background.png');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

Vue3でassets/images配下に画像を入れて、
上記コードを記述してみると、背景が真っ白。
検証ツールを見てみると、404のエラーが発生している。

試したこと

https://qiita.com/skmtko/items/a83f836b48f24309916d/
上記を参考に変数にしてみたり、HTML側に直接styleを記述したり
してみるもうまくいかず、、、

解決方法

試しにjavascriptファイルの中にimagesファイルを新たに作り、
その中に画像を入れてみた。

<template>
  <div class="hoge">
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  }
}
</script>

<style scoped>
.hoge{
  width: 100%;
  height: 100vh;
  background-image: url('@/images/background.png');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

background-imageのurlのパスを少し修正。
すると、背景画像が現れました。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?