CODEWITHSUNDEEP
reactjsimageobjectwebpackcomponents
Benjamin
Benjamin

Reputation: 1

Import images with Create-React-App dynamically

I hope that somebody can help me with my problem.

I started learning React and I want to display images dynamically from an object named "project".

I am looping inside "projects" and pass each item as props of a component "Project".

It displays the other items (name, description, alt) but I can't get the images.
I tried this method : <img src={require(`./img/${project.image}`)} but it doesn't work.
There is no error message, but it shows nothing.

I saw a lot of people have the same problem, but I tried everything...I don't know what to do.

This is my object:

projects list

The organization of my folder:

folder

My component Project:

component Project

And the website:

what I have on the screen

Upvotes: 0

Views: 344

Answers (2)

Benjamin
Benjamin

Reputation: 1

Thank you guys ! I found a way to do it.
I first imported the images to my object file "projects". Then I imported my object and I made a loop

import images

loop

Finally, my component Project component Project

Thank you all for your help!

Upvotes: 0

Kayra Berk Tuncer
Kayra Berk Tuncer

Reputation: 395

You don't need to use require. It will work if you use it that way.

<img src={`./img/${project.image}`} alt={project.alt} />

I hope that will be useful.

Upvotes: 1

Related Questions