Vuejsでbackground imageのパス指定にハマった（再録）

この記事は2019年05月26日 に公開した記事の内容を少しだけ更新してます

どうもです

今回は、Vue.jsを使ってポートフォリオを作っている中で画像の読み込みに四苦八苦したのでその解決方法の備忘録

割と消化不良なままの解決策なので、他に綺麗にできる方法があるなら教えて欲しいところ…

環境

Vue 2
vue-cli 2.9.6

困ったこと

vue-cliで作ったプロジェクトのvueファイルからsrc/assetsにある画像をcssで呼び出していたのだが、 buildした物を動かそうとすると読み込まれていなかった

<style>
#app {
  background: no-repeat center url("./assets/bg-img.png");
}
</style>

ブラウザの開発ツールで見てみると、 http://.../static/css/static/image/bg-img.png をロードしようとしてた。どんなパスやねんそれ

という感じで詰まってた

解決方法

検索してみたら参考になりそうな記事はあったけど、うまくいかない【Vue.js】imgタグのsrc要素は指定の仕方によって読み込み方が違う

背景画像だけjavascript側でロードし、タグのstyleに直接指定した（あまり気に入らないが….）

<template>
  <!-- javascript側でロードして読み込ませる -->
  <div id="app" :style="{ 'background-image': 'url(' + backgroundImageSrc + ')' }"></div>
</template>
<script>
export default {
  data () {
    return {
      backgroundImageSrc: require("@/assets/bg-img.png")
    }
  }
}
</script>

<style>
#app {
  background: no-repeat center;
}
</style>

半日費やしてとりあえず解決には至ったけども、もっと綺麗なやり方はありそうポートフォリオ作成にそこまで時間かけ過ぎたくないので、多少思うところはあれど、まぁ…うんって感じ

Vuejsでbackground-imageのパス指定にハマった（再録）

環境

困ったこと

解決方法