如何在next/js中整齐地导入多个图片？

Question

问题是我的public文件夹中有 10 张图像，我想在组件中使用它们。而不是写作

import imgurl1 from "../../public/celsius.gif";
import imgurl2 from "../../public/compass.gif";
import imgurl3 from "../../public/rain.gif";
.
.
.
import imgurl8 from "../../public/thermo.gif";
import imgurl9 from "../../public/sunset.gif";
import imgurl10 from "../../public/wind.gif";

上面的代码，我想使用一些更整洁和干净的代码？有没有办法不重复同一行并将其全部导入？

我假设类似的事情

import { imgurl1,imgurl2,...imgurl10, } from "../../public";

Answer 1

Next JS 的图像导入是作为一个 webpack 插件实现的，该插件是使用import symbol from 'filepath- 您将无法直接更改其工作方式，但没有什么可以阻止您创建导出导入文件的帮助程序文件。

换句话说，您可以将所有导入内容移至images.js底部并导出所有内容。然后，您可以使用解构导入来导入它们。