NuxtServerError：找不到模块“未定义”

Question

我试图将图像从我添加到项目路径“ Main”的文件夹中动态上传到vuetify轮播组件中。

我的组件看起来像：

<template>
  <v-carousel>
    <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
  </v-carousel>
</template>


<script>
function getImagePaths() {
  // var images = require.context('../../main/img/', false, /\.png$/)
  var images = require.context("../../main/", false, /\.png$/);
  // var images = require.context('/main/', false, /\.png$/)
  console.log("images", images);
  return images;
}

export default {
  methods: {
    imgUrl: getImagePaths()
  }
}; 

我得到了：

NuxtServerError: Cannot find module 'undefined' 

（上面的截图）我该如何解决？

编辑：如果我将脚本标签更改为：

  <script>
// function getImagePaths() {
//   // Load locally as a function.
//   const fs = require("fs-extra");

//   var requireContext = require("require-context");
//   // var images = require.context('../../main/img/', false, /\.png$/)
//   var images = require.context("../../main/", false, /\.png$/);
//   // var images = require.context('/main/', false, /\.png$/)
//   console.log("images", images);
//   return images;
// }

// export default {
//   methods: {
//     imgUrl: getImagePaths()
//   }
// };
export default {
  data () {
    return {
      items: [
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
        }
      ]
    }
  }
}
</script>

它按预期工作。