Import images with Create-React-App dynamically

Question

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

I believe you have to import the pictures individually before you can use them — WebbH
– WebbH, Commented May 12, 2021 at 15:45

Kayra Berk Tuncer · Accepted Answer · 2021-05-13 11:42:37Z

1

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.

answered May 13, 2021 at 11:42

Kayra Berk Tuncer

4054 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Benjamin · Accepted Answer · 2021-05-24 15:01:47Z

0

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!

answered May 24, 2021 at 15:01

Benjamin

12 bronze badges

Collectives™ on Stack Overflow

Import images with Create-React-App dynamically

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related