Как привязать картинку к элементу?

Question

[WarriorKodeK]

Всем привет. Мне приходят данные (объэкты) с апи. В каждом объэкте имеются елементы с именем.
Мне надо прикрепить картинку по этому имени. Как лучше сделать?

Сейчас у меня так, но т.к имя строка, оно не считывает. Как можна решить эту задачу?

import React from "react";
import { Container, Row, Col } from "reactstrap";
import "./ProductList.css";

//Images
import Cappuccino from "../../images/Cappuccino.png";
import Americano from "../../images/Americano.png";
import Espresso from "../../images/Espresso.png";
import Lungo from "../../images/Lungo.png";
import Ristretto from "../../images/Ristretto.png";
import Doppio from "../../images/Doppio.png";

export const ProductsList = ({ productInformation }) => {
  return (
    <Container>
      <Row>
        {productInformation.data.map((element, index) => {
          return (
            <Col xs="3" className="coffee" key={index}>
              <img src={element.name} alt={element.name} />
            </Col>
          );
        })}
      </Row>
    </Container>
  );
};

Пробовал еще так, но тоже не идет(

<img
                src={`../../images/${element.name}.png`}
                alt={element.name}
              />

Структура проекта:

Всем спасибо!

UPDATE:

Сделал так, но чувствую что такое г**вно сделал))

<img src={require(`../../images/${element.name}.png`)} alt={element.name}/>

Жду ваши предложения)

Answer 1

[Юра Комаров]

Смотри какая структура каталогов на выходе из сборщика ( те в папке dist ) и относительно ее пиши путь

dist
..images/
..js/
index.html

то путь будет ./images/name_page либо ../images/

Comments

[Юра Комаров]

<img src="../images/{element.name}" alt={element.name} />