Importing images in React

Thanks! But no, that’s not my problem. I am working locally on my files at the moment. I created my app using create-react-app.
My problem is that in order to insert an image in an app made with React, I have to write an import statement for that image, for example:

import image01 from './assets/ima01.jpg'

and then use it anywhere in my code like so:

{image01}

My problem is that I have a big image gallery and it seems unpractical to write a separate import statement for each one of the images. I want to display them dynamically so I have a state object which has the info for each item in my gallery, including a path to the image: ‘…/assets/ima01.jpg’. I want to map out these objects into elements, and the image file should be retrieed by using the img property which is set to the path.

That doesn’t work of course, so I wonder if there is a way around having to write each separate import statement for each separate image when you want to render them dynamically, day by mapping out an array of objects.

I’m sorry that my question was vague! I hope it’s clearer now. Thanks!

1 Like