[解決済み] Vue.jsのダイナミックイメージが動作しない

質問

私の Vue.js と webpack ウェブアプリで、動的な画像を表示する必要があります。表示したいのは img ここで、画像のファイル名は変数に格納されます。その変数が computed プロパティが返されます。 Vuex で非同期的に入力されるストア変数です。 beforeMount .

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

しかし、そのまま実行すると完全に動作します。

<img src="../assets/dog.png" alt="dog">

私の場合は、以下のような感じです。 フィドル しかし、ここではimgのURLで動作しますが、実際のファイルパスで私の場合は、それが動作しません。

正しい方法は何でしょうか？

どのように解決するのですか？

以下のコードで動作するようになりました。

  getImgUrl(pet) {
    var images = require.context('../assets/', false, /\.png$/)
    return images('./' + pet + ".png")
  }

で、HTMLでは

<div class="col-lg-2" v-for="pic in pics">
   <img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>

しかし、なぜ私が以前行った方法がうまくいかなかったのか、よくわかりません。