在从 api 渲染图像的反应中找不到模块答案

【问题标题】：Module not found in react for render image from api在从 api 渲染图像的反应中找不到模块
【发布时间】：2021-10-12 20:09:49
【问题描述】：

我目前正在创建一个电子商务的反应应用程序，我遇到了一个功能，当产品点击并重定向到产品详细信息页面时，我可以使用道具成功获取产品图像和详细信息但无法获取产品图片。产品图片需要来自 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>

【问题讨论】：

我正在尝试调用包含 productID 和 imageID 的图像 API，而不是来自文件夹。

标签： javascript arrays reactjs mongodb api

【解决方案1】：

您应该删除包装 API URL 的 require()。

错误告诉你文件路径不存在。

Carousel 中的每个项目都使用带有 src 属性的 <img>。要为 src 使用 API 端点/URL，它应该直接作为字符串传递，而不使用 require。

【讨论】：

【解决方案2】：

谢谢，我已经解决了，只是删除了 require 字。

【讨论】：