Vue.js 动态图像不起作用

Question

我有一个案例，在我的 Vue.js 和 webpack Web 应用程序中，我需要显示动态图像。我想显示 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">

我的情况类似于这个 fiddle ，但在这里它适用于 img URL，但在我的实际文件路径中，它不起作用。

正确的方法应该是什么？

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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>

但不知道为什么我之前的方法不起作用。

原文由 Saurabh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<div
    v-for="(data, i) in statistics"
    :key="i"
    class="d-flex align-items-center"
  >
    <img :src="require('@/assets/images/'+ data.title + '.svg')" />
    <div class="ml-2 flex-column d-flex">
      <h4 class="text-left mb-0">{{ data.count }}</h4>
      <small class="text-muted text-left mt-0">{{ data.title }}</small>
    </div>
  </div>

原文由 Prashant Pandey 发布，翻译遵循 CC BY-SA 4.0 许可协议