javascript - How to import multiple Images neatly in nextjs? - Stack Overflow

admin管理员组

文章数量:1406943

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

import imgurl1 from "../../public/celsius.gif";
import imgurl2 from "../../public/pass.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";

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

import imgurl1 from "../../public/celsius.gif";
import imgurl2 from "../../public/pass.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";

• javascript
• reactjs
• import
• next.js
• next-images

Share Improve this question Follow asked Mar 28, 2022 at 14:59 MagnusEffectMagnusEffect 3,93533 gold badges2727 silver badges6161 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.

本文标签： javascriptHow to import multiple Images neatly in nextjsStack Overflow