How to get all the image files in a directory using vue.js / nuxt.js

Question

I am working on a nuxt.js project and getting error:

In browser I am seeing this error:

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

And, in terminal I am getting this error:

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

Here is my code

<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>

I have used the above script from HERE.

Please help, thanks.

EDIT: After following @MaxSinev's answer, here is how my working code looks:

<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>

@Terry it's not quite correct answer. Both `import` and `require` imports file as module, if you want to import images you can do that only with specified webpack loader and there is no difference between `import` and `require` for webpack. But in question example we can not use `import` because we have to use webpack helper `require.context` to load all images dymically during bundling. — Max Sinev, Jan 08 '19 at 21:02
@Terry, even `.png`'s can be imported `import defaultAvatar from '@/assets/images/default-avatar.png'` — Syed, Jan 13 '19 at 06:01

score 17 · Accepted Answer · answered Jan 08 '19 at 21:04

17

From the webpack docs:

The arguments passed to require.context must be literals!

So I think in your case parsing of require.context failed.

Try to pass literal instead of imageDir variable

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

It is necessary because webpack can not resolve your runtime variable value during bundling.

answered Jan 08 '19 at 21:04

Max Sinev

5,884
2
25
35

thanks for your help, I have included working code in my answer. – Syed Jan 09 '19 at 05:40
when i am adding .pdf its throwing error. is there any way to get list of all files from a folder? – Sudhir K Gupta May 15 '19 at 06:24
@SudhirKGupta if you want to involve pdf file to the bundling process you should add, for example, `file-loader` definition for your file type after that it will be resolved by webpack. – Max Sinev May 15 '19 at 11:19

score 4 · Answer 2 · answered Jul 16 '22 at 14:37

4

Solution for vue 3 with vite:

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

Read more: https://github.com/vitejs/vite/issues/77

answered Jul 16 '22 at 14:37

Jannik Buscha

658
1
9
18

How to get all the image files in a directory using vue.js / nuxt.js

2 Answers2