我有一种情况,在Vue.js使用webpack网络应用程序时,我需要显示动态图像。我想显示img图像文件名存储在变量中的位置。该变量是一个computed属性,它返回一个Vuex存储变量,该变量在上异步填充beforeMount。
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">
正确的方法应该是什么?
我通过以下代码来工作
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>
但是不确定为什么我以前的方法行不通。