我有一个案例，在我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">
我的情况类似于这个fiddle，但在这里它适用于 img URL，但在我的实际文件路径中，它不起作用。
正确的做法应该是什么？
我通过以下代码得到了这个工作
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>
但不确定为什么我之前的方法不起作用。
这是 webpack 将使用的速记，因此您不必使用require.context.
HTML：
<div class="col-lg-2" v-for="pic in pics">
<img :src="getImgUrl(pic)" v-bind:alt="pic">
</div>
方法：
getImgUrl(pic) {
return require('../assets/'+pic)
}
我发现这里的前两段解释了为什么会这样？好。
请注意，将您的宠物图片放在子目录中是个好主意，而不是将其与所有其他图像资产一起放入。像这样：./assets/pets/
你可以试试这个require功能。像这样：
<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />
该@符号指向src目录。
来源：Vue URL 转换规则
还有另一种方法是将图像文件添加到公共文件夹而不是资产并将其作为静态图像访问。
<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >
这是您需要放置静态图像的地方：
最好的办法是使用一种简单的方法为给定索引处的图像构建正确的字符串：
methods: {
getPic(index) {
return '../assets/' + this.pics[index] + '.png';
}
}
然后在您的内部执行以下操作v-for：
<div class="col-lg-2" v-for="(pic, index) in pics">
<img :src="getPic(index)" v-bind:alt="pic">
</div>
这是 JSFiddle（显然图像没有显示，所以我把图像放在图像src旁边）：