无法在 ReactJS（前端）中显示来自 Strapi 的图像

Question

我无法将来自 Strapi 的图像显示到我的 ReactJS（前端）。

这是我的主页代码：

import React from "react";
import useFetch from "../hooks/useFetch";
import { Link } from "react-router-dom";

export default function Homepage() {
  const { loading, error, data } = useFetch(
    "http://localhost:1337/api/reviews"
  );


  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  console.log(data);

  return (
    <div>
      {data.data.map((review) => (
        <div key={review.id} className="review-card">
          <h1>{review.attributes.title}</h1>
          <img src={'http://localhost:1337/api/reviews?populate=reviewImage'} alt={"Not Working!"}/>
        </div>
      ))}
    </div>
  );
}

这是输出：

这是我在邮递员中获得的数据：

Answer 1

我不确定我是否遗漏了什么，但我没有看到任何与图像相关的属性 URL。

你从http://localhost:1337/api/reviews
获取数据
您在 return 语句
中迭代数据
通过浏览您的迭代，您将 src 指向 http://localhost:1337/api/reviews?populate=reviewImage 虽然， http://localhost:1337/api/reviews 似乎没有任何包含图像的属性。

此外，除非 API 端点 return 是图像本身，否则该来源不正确。

我的建议：

如果可以修改您正在使用的任何东西 API，我会沿着这条路线做一些事情：

将直接图像 URL link 附加到您从 http://localhost:1337/api/reviews 一旦你这样做了，你就可以像你对标题所做的那样定位它并做类似的事情：

      {data.data.map((review) => (
        <div key={review.id} className="review-card">
          <h1>{review.attributes.title}</h1>
          <img src={review.attributes.image} alt={...}/>
        </div>
      ))}
    </div>```

Answer 2

因此，由于您最初的问题中没有说明，我猜您正在使用 Strapi v4...

对于 Strapi v4，您必须牢记一个重大变化。默认情况下，Strapi V4 不 return 媒体文件或关系数据。因此，您需要按照文档中的概述调整您的请求。

移至此问题以查看更多详细信息：

要解决您的第一个问题，我建议调整您的 fetch 调用。因此，只需包含 populte 字段（就像您已经做的那样 @ img src），您将获得图像数据。您可以使用 Postman 对此进行测试并比较结果。

那么你的第二个问题就是img src想要一个url。在您的示例中，您或多或少会分配完整的 json 响应。但是一旦你尝试解决你的第一个问题，你就会明白我的意思。然后你可以像这样使用它：

 <img src={`${REPLACEWITHYOURBASEURL}${review.attributes.reviewImage.data.attributes.url}`}></img>

无法在 ReactJS（前端）中显示来自 Strapi 的图像

Can't display image from Strapi in ReactJS (frontend)

reactjs

strapi