Как удобно принимать картинки с бекенда и ставить на сайте?

Question

[vovashaplin]

Я по апи получаю путь картинки относительно src, вставляю в img, но не работает

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

Я знаю что можно импортить картинки вот так.

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

Но как это сделать если у меня будет тысяча товаров и к ним картинки. Не писать же мне импорты вручную.

Answer 1

[supfiger]

Вам нужно принимать картинки с бэка, пользуйтесь удобным спообом, например REST API / GraphQL, и дальше сохранять где-то на клиенте (state/localstorage etc.), допустим в массив объектов.

А там списком выводите, стандартный метод map:

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

Ну конечно, у вас там свои ключи и названия будут, можете делать по примеру.

Comments

[vovashaplin]

Сделал вот так src={require(`..${item.image}`)}
Но пишет => Error: Cannot find module '../uploads/_35%20(1).JPG'

Если писать в src="../uploads/_35%20(1).JPG" то все работает

[supfiger]

vovashaplin, а почему у вас в src require и таким образом путь прописываете?))
Можно ведь map'ом выводить, как я продложил.

Возможно, для ясности мне нужно видеть картину более шире, так как следующий момент мне тоже не ясен, почему так реагирует:

Но пишет => Error: Cannot find module '../uploads/_35%20(1).JPG'

У вас объекты такого плана же выходят?

const item = {
  text: "some text",
  id: 123,
  url: "/yourURL",
}

[vovashaplin]

Вот пробовал по разному

( убрал комментарии,чтобы лучше видно было)
Работает только если конкретно указать
src={require("../uploads/Lumia1520-Front-Back-png.png")}
Параметры точно приходят по api, так как поле name и description спокойно выводятся

[vovashaplin]

Danil Zinchenko, не понимаю эту магию да и в интернете ничего не нашел подобного, мб плохо искал, но все же долго не могу решить.
Почему-то даже такой тестовый пример не работает
const getImage = () => {
let img = "../assets/player.jpg"
return require(`${img}`)
}
Всегда выдает подобную ошибку

[vovashaplin]

Вот расположение. Работал из компонента Items

Вот github если хочется посмотреть на картину целиком
https://github.com/ScrollPage/Test-Shop

[supfiger]

vovashaplin, спасибо, скачал ваш код.
Хотелось бы просмотреть список товаров в действии. В backend не силен, скажите, как запустить у вас бек?
Посмотрю, протестирую, надеюсь помогу, если еще актуально.

[vovashaplin]

Danil Zinchenko, cd backend, python manage.py runserver. cd frontend, npm start. Если еще актуально))