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のパスを少し修正。
すると、背景画像が現れました。