如何使用vue.js/nuxt.js獲取一個目錄下的所有圖片文件

Question

我正在開發一個 nuxt.js 項目並遇到錯誤：

在瀏覽器中我看到這個錯誤：

__webpack_require__(...).context is not a function

而且，在終端我收到這個錯誤：

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted 

這是我的代碼

<script>
export default {
  name: 'SectionOurClients',
  data() {
    return {
      imageDir: '../assets/images/clients/',
      images: {},
    };
  },

  mounted() {
    this.importAll(require.context(this.imageDir, true, /\.png$/));
  },

  methods: {
    importAll(r) {
      console.log(r)
    },
  },
};
</script>

我從HERE使用了上面的腳本。

請幫忙，謝謝。

---

編輯：遵循@MaxSinev 的回答后，我的工作代碼如下所示：

<template lang="pug">
  .row
    .col(v-for="client in images")
      img(:src="client.pathLong")
</template>

<script>
export default {
  name: 'SectionOurClients',
  data() {
    return {
      images: [],
    };
  },

  mounted() {
    this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
  },

  methods: {
    importAll(r) {
      r.keys().forEach(key => (this.images.push({ pathLong: r(key), pathShort: key })));
    },
  },
};
</script>

Answer 1

來自 webpack 文檔：

傳遞給require.context的參數必須是文字！

所以我認為在你的情況下解析require.context失敗。

嘗試傳遞文字而不是imageDir變量

mounted() {
    this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
},

這是必要的，因為 webpack 在捆綁期間無法解析您的運行時變量值。

Answer 2

vue 3 與 vite 的解決方案：

<script setup lang="ts">
const fonts = import.meta.glob('@/assets/fonts/*.otf')
console.log(fonts)
</script>

閱讀更多： https ://github.com/vitejs/vite/issues/77