Vuejsで画像パスを変数に入れている場合

Question

vuejsを入門してます

PropsのurlImageに"../assets/****.png"みたいなのが入ってるとして、それを
v-bind:style="{ background: 'url('+urlImage+') no-repeat', backgroundSize:'320px 240px' }"

って感じで指定してます

すると変数は良い感じにバンドルしてくれないので表示されません。

今はとりあえずstaticフォルダに入れて、変数に入れるパスを/static/****.pngにしているのですが、あまり賢いやり方では無いと思うので、良い感じの方法を教えてください！

Answer 1

変数で指定すると、Webpackのビルド時にurl-loaderなどが解析できないので、多分そういう感じになるかと思います。
VuexでbaseDirみたいな共通の変数を持たせておくと少し便利かもしれません。
ES2015記法で書くとstyle属性の指定が少しだけすっきりします。

<div :style="{ backgroundImage: `url('${image}')` }"></div>