Vue.js - 使用 v-for 动态创建不起作用的图像； 找不到源代码

Question

所以我有非常可预测的命名图像，并希望将所有图像自动导入 Vue 以在网页上显示。 在使用 Vue CLI 时，我可以让程序看到我的资产文件夹中的任何图像的唯一方法是我对图像名称进行硬编码； 动态生成图像名称，如通过字符串连接和使用 v-for，不起作用。 在我的代码模板中，您将看到 7 个“Face”组件，其中 5 个已注释且不起作用。 只有 2 个未注释的硬编码图像定义有效，即使它们看起来都一样！ 知道如何解决这个问题吗？

 <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)$/));

但是，我发现如果将 './assets/' 替换为变量， importAll 语句会完全崩溃，这很奇怪，如下例所示：

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

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