How can I import multiple Images from the "public" folder
Unanswered
Sun bear posted this in #help-forum
Sun bearOP
Hello,
I would like to know how I can import multiple Images from the "public" folder in a efficient / automatically way.
Afterwards I would like to iterate over the Images and display them with the <Image> Component.
Edit:
I've already stumbled over a few methods, but I would like to know the probably "best" or considered "state of the art" way in Version 13 of Next.
Also I would like to be able to add Images while the app is running, so I don't have to rebuild the app every time I add a new image.
Kind regards
I would like to know how I can import multiple Images from the "public" folder in a efficient / automatically way.
Afterwards I would like to iterate over the Images and display them with the <Image> Component.
Edit:
I've already stumbled over a few methods, but I would like to know the probably "best" or considered "state of the art" way in Version 13 of Next.
Also I would like to be able to add Images while the app is running, so I don't have to rebuild the app every time I add a new image.
Kind regards
5 Replies
Giant panda
The public folder is only for static assets that will never change and is meant to reference images by hardcoding them like
src="/images/foo/bar.png". That's also one of the reasons why you don't literally import them as importing them would bundle them instead.For images added during runtime such as via user uploads it's the most common approach to use a blob storage like Cloudflare R3 or AWS S2.
Sun bearOP
Hmm, I'm building a Photography Portfolio for myself, so wouldn't it be unnecessary to outsource my own pictures?
Wouldn't it be smarter to store them on my own server instead?
What do you mean by "bundling" when you import them?
Wouldn't it be smarter to store them on my own server instead?
What do you mean by "bundling" when you import them?
Giant panda
Anything that you
import is bundled into the final JS artifacts, be it code, images or other assets.Sun bearOP
Ah, okey. Got it.
So what would you consider to be the smartest way to solve my problem?
I mean outsourcing my images to for example Cloudflare, ... and so on would probably result in more costs hosting my personal project. That's probably not the approach I would take.
What would be another possibility except storing pictures in the public folder and outsourcing them to cloudflare/... ?
So what would you consider to be the smartest way to solve my problem?
I mean outsourcing my images to for example Cloudflare, ... and so on would probably result in more costs hosting my personal project. That's probably not the approach I would take.
What would be another possibility except storing pictures in the public folder and outsourcing them to cloudflare/... ?