Vue.jsでbackground-imageを指定するときにハマったのと対処法

やりたかったこと

VueのComponentの中に背景画像を指定したstyleを作成しておき、そのスタイルを適用させたかった。

しかし

background-image : url("./image/dog.jpg")

をするために

styleItem = {
     'backgroundImage' : 'url(' + "./image/dog.jpg" + ')'
}

としたが結果はうまくいかず....
GoogleChromeの検証結果を確認したところトランスパイル後のstyleの指定がurlのままで相対パスから変化してくれてなかった。なぜだ。issueが出てて読んでみたけどいい感じのものは無し。

解決法

vue-loaderのドキュメントを読んだところ、トランスパイル時にrequire()で絶対パスに直しているそうなので

styleItem = {
     'backgroundImage' : 'url(' + require("./image/dog.jpg") + ')'
}

としたところ、うまくいった。よかった。これでリアクティブに背景画像が変えられる！！！
もっとうまい書き方あったら誰か教えてください〜！