小编典典

Vue.js动态图像不起作用

javascript

我有一种情况,在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">

正确的方法应该是什么?


阅读 376

收藏
2020-05-01

共1个答案

小编典典

我通过以下代码来工作

  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>

但是不确定为什么我以前的方法行不通。

2020-05-01