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 時必須解決的問題。