Vue.js动态图像不起作用

javascript html vue.js vuejs2

2022-08-30 02:22:22

我有一个案例，在我的Web应用程序中，我需要显示动态图像。我想显示图像的文件名在变量中的存储位置。该变量是返回存储变量的属性，该存储变量正在上异步填充。Vue.jswebpackimgcomputedVuexbeforeMount

<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，但在我的实际文件路径中，它不起作用。

应该采取什么正确的方法？

答案 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>

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

答案 2

这是webpack将使用的速记，因此您不必使用。require.context

网页：

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

Vue 方法：

getImgUrl(pic) {
    return require('../assets/'+pic)
}

我发现这里的前两段解释了为什么这有效？很好。

请注意，最好将宠物图片放在子目录中，而不是将其与所有其他图像资产一起放入。这样：./assets/pets/