vue.jsで画像が表示できない

Question

npm run devでプロジェクトを立ち上げました。
SPAを作成中なのですが背景画像を取り込みたいと思い、static下に画像をおきました。
static/IMG_2209.JPG　
のような感じです。
(参考：https://qiita.com/skmtko/items/a83f836b48f24309916d）
こちらを参考にしたのですが、一向に画像が表示されません。
エラーは発生してないです。
どうすれば改善できるでしょうか。

以下src/component/HelloWorld.vueのソースコードとなります。

コード

<template>
  <div class="bg">
    <h1>{{ msg }}</h1>
    <p>閲覧いただきありがとうございます。</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to my portfolio'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  font-weight: bold;
}

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

Answer 1

恐らくVue-CLIでプロジェクトを作成されたのだと思いますが、Vue-CLIがバージョン3以上の場合、staticフォルダはなく、代わりにpublicフォルダがあるようです。
（一次ソースはすぐには見つけられなかったので、上記記載は下記のブログ記事によるものです）
Vue.js インストール後にstaticフォルダが無い問題

publicフォルダに画像を置くことで、上記のCSSで画像が表示できるかと思います。

（追記）現行バージョンの公式ドキュメントを見ていますが、"static"フォルダに画像を置くというような記述自体が見当たりませんね、、（"public"フォルダに置き換わっています）
Vue.jsを使い始めて日が浅い身なので、歴史的経緯などは分かりかねますが、恐らく以前は"static"フォルダがデフォルトで存在していて、そこに画像を置けばよかったのだと思います。
そのため、その頃に書かれた記事にはそのような記述があるのでしょう。