title: How to get all the image files in a directory using vue.js / nuxt.js
body: <p>I am working on a nuxt.js project and getting error: </p>
  
  <p>In browser I am seeing this error:</p>
  
  <pre><code>__webpack_require__(...).context is not a function
  </code></pre>
  
  <p>And, in terminal I am getting this error:</p>
  
  <pre><code>Critical dependency: require function is used in a way in which dependencies cannot be statically extracted 
  </code></pre>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;script&gt;
  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)
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>I have used the above script from <a href="https://stackoverflow.com/a/48875151">HERE</a>.</p>
  
  <p>Please help, thanks.</p>
  
  <hr>
  
  <p><strong>EDIT</strong>: After following @MaxSinev's answer, here is how my working code looks:</p>
  
  <pre><code>&lt;template lang="pug"&gt;
    .row
      .col(v-for="client in images")
        img(:src="client.pathLong")
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'SectionOurClients',
    data() {
      return {
        images: [],
      };
    },
  
    mounted() {
      this.importAll(require.context('../assets/images/clients/', true, /\.png$/));
    },
  
    methods: {
      importAll(r) {
        r.keys().forEach(key =&gt; (this.images.push({ pathLong: r(key), pathShort: key })));
      },
    },
  };
  &lt;/script&gt;
  </code></pre>