Vue.js-使用v-for动态创建不起作用的图像;找不到src

Question

因此，我有非常可预测的命名图像，并希望将所有图像自动导入Vue中，以便在网页上显示。在使用Vue CLI时，我可以让程序查看资产文件夹中的任何图像的唯一方法是对图像名称进行硬编码；通过字符串串联和使用v-for动态生成图像名称是不起作用的。在我的代码模板中，你会看到7个"Face"组件，其中5个已被注释，无法工作。只有两个未经评论的硬编码图像定义有效，尽管它们看起来都是等效的！知道我该怎么解决这个问题吗？

<template>
<div id="app">
<Face :src="src" />
<div v-for="image in images" :key="image.id">
<!-- <Face :src="image.src"/> -->
<!-- <Face :src="getImage(image.src)"/> -->
<!-- <Face :src="require(image.src)"/> -->
<!-- <Face :src="`require('./assets/test${image.id}.png')`"/> -->
<Face :src="require('./assets/test0.png')"/>
</div>
<!-- <Face v-for="image in images" :key="image.id" :src="require(image.src)"/> -->
</div>
</template>
<script>
const _ = require('lodash');
import Face from './components/Face.vue'
const imageDir = "./assets/";
const images = [];
// Generate image names
for (let i of _.range(3)) {
let imageName = `${imageDir}test${i}.png`;  
images.push({id: i, src: imageName});
console.log(images);
}
export default {
name: 'app',
data() {
return {
src: require("./assets/test0.png"),
images: images,
}
},
methods: {
getImage(url) {
return require(url);
},
},
components: {
Face
}
}
</script>

对于那些要求Face组件代码的人(目前它的设计尽可能简单，因为我才刚刚开始这一切(：

<template>
<div class="centered">
<img :src="src">
</div>
</template>
<script>
export default {
props: {
src: {
type: String,
required: true,
},
},
data() {
return {
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.centered {
margin: 0 auto;
}
</style>

Answer 1

我使用改编自如下所示：

function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('./assets/', false, /.(jpg)$/));

然而，我发现奇怪的是，如果替换"，importAll语句会完全崩溃/assets/'，如以下情况：

const imageDir = './assets/'
const images = importAll(require.context(imageDir, false, /.(jpg)$/));

这种奇怪的行为显然只是你在处理Webpack时必须解决的问题。