How to import multiple Images neatly in next/js?

Question

The question is that I am having 10 images in my public folder and I want to use them in a component. Instead of writing

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

the above code, I want to use something more neatly and clean code? Is there any way not to repeat the same line and import all of them?

I am assuming something like

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

Answer 1

Next JS's importing of images is implemented as a webpack plugin which is implemented using import symbol from 'filepath - You won't be able to change the way that works directly, but there is nothing preventing you from creating a helper file that exports the imported files.

In other words, you can take all your imports and move them to images.js and export all of them at the bottom. You then can import them using a destructured import.