How convenient is it to accept images from the backend and put them on the site?

Question

React

I get the image path relative to src using api, insert it into img, but it doesn't work

<img src={item.image} alt={item.name} className="card-img-top" />

I know that you can import pictures like this.

import Img from '../assets/player.jpg'
<img src={Img} alt={caseItem.title} />

But how to do this if I have a thousand products and pictures for them. Do not write me imports manually.

Answer 1

You need to accept images from the back, use a convenient method, such as REST API / GraphQL, and then save somewhere on the client (state/localstorage etc.) , let's say in an array of objects.
And there, display the list, the standard map method:

<ul>
  {list.map((item) => <li key={item.id}>{item.text}</li>)}
</ul>

Well, of course, you will have your own keys and names there, you can follow the example.