Vue.js动态图像不工作

Question

在我的Vue.js和webpackweb应用程序中，我需要显示动态图像。我想显示img，其中图像的文件名存储在变量中。该变量是一个computed属性，返回一个Vuexstore变量，该变量在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一起工作，但在我的实际文件路径中，它不起作用。

正确的方法应该是什么？

Answer 1

您可以尝试require功能。这样地：

html prettyprint-override"><img :src="require(`@/xxx/${name}.png`)" alt class="icon" />

@符号指向src目录。

来源：Vue URL转换规则

Answer 2

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

HTML:

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

Answer 3

我通过下面的代码来工作

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

用超文本标记语言：

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

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