Javascript NuxtServerError:找不到模块'；未定义'；

我正在尝试将图像从添加到名为“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()
  }
}; 

（上面的屏幕截图）我如何解决这个问题

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

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

//函数getImagePath（）{
////作为函数本地加载。
//常数fs=要求（“fs额外”）；
//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（“图像”，图像）；
//返回图像；
// }
//导出默认值{
//方法：{
//imgUrl:getImagePath（）
//   }
// };
导出默认值{
数据（）{
返回{
项目：[
{
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'
}
]
}
}
}

---

它按预期工作。

如果尝试

https://cdn.vuetifyjs.com/images/carousel/sky.jpg

？@BoussadjraBrahim，请参见编辑。请看这个谢谢，我不知道图像必须作为模块导入。关于您的答案，您有下面一行：“从“/assets/jim.svg”导入img；我试图首先获得所有.png文件的路径列表。我不想在src路径中硬编码。”请编辑您的问题，添加您的用例，如果您采用我的答案，您的错误是什么？

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