Модуль не найден в реакции для рендеринга изображения из API

Question

В настоящее время я создаю реагирующее приложение для электронной коммерции, я застрял с функцией, при которой, когда продукт щелкает и перенаправляет на страницу сведений о продукте, я успешно могу получить изображение продукта и детали, используя реквизиты, но не могу получить изображение продукта. Изображение продукта требует вызова из API. Поэтому я пытаюсь направить вызов из src. Но я получаю сообщение об ошибке, когда модуль не найден. Пожалуйста, помогите мне с этим.

Получение ошибки в коде в этой строке, где я пытаюсь вызвать API напрямую tp src.

Это ошибка, которую я получаю

// carousel items
  const carouselItems = [
    {
      
      src: require(`/api/v1/ProductFile/${encodeURIComponent(
                        data.data.ID
                      )}/Product/${encodeURIComponent(
                        data.data.ProductImages[0]
                      )}`),
      altText: "Somewhere",
      caption: "Somewhere",
    },
    {
      src: require("assets/img/megan-product-2.jpg"),
      altText: "Somewhere else",
      caption: "Somewhere else",
    },
    {
      src: require("assets/img/megan-product-3.jpg"),
      altText: "Here it is",
      caption: "Here it is",
    },
    {
      src: require("assets/img/megan-product-4.jpg"),
      altText: "Here it is",
      caption: "Here it is",
    },
  ];
  
   <div>
      <Row>
        <Col key={data.data.ID} md="7" sm="6">
          <div className="ml-auto mr-auto" id="carousel">
            <Card className="page-carousel">
              <Carousel
                activeIndex={activeIndex}
                next={next}
                previous={previous}
              >
                <CarouselIndicators
                  items={carouselItems}
                  activeIndex={activeIndex}
                  onClickHandler={goToIndex}
                />
                {carouselItems.map((item) => (
                  <CarouselItem
                    onExiting={onExiting}
                    onExited={onExited}
                    key={item.src}
                  >
                    <img src={item.src} alt={data.data.Name} />
                    <CarouselCaption captionHeader={data.data.Name} />
                  </CarouselItem>
                ))}
               
               
              </Carousel>
            </Card>
          </div>
          {/* end carousel */}
        </Col>
        
      </Row>
    </div>

Модуль не найден в реакции для рендеринга изображения из API

Ответы (2)