显示带有来自strapi的反应的图像

Question

我在从strapi 获取图像时遇到问题。 我尝试了很多，但它不会显示任何图像，当我发布富文本广告时尝试图像它不会工作，有人可以帮助我！

const ApiUrl = ('http://localhost:1337')

const { id } = useParams() const {loading , error , data } = useFetch('http://localhost:1337/reviews/ ' + id)

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

return (
    <div className={classes.root}>
      <div className={classes.container}>
     
      <img src={ApiUrl + data.image} alt={data.naam} />
      <h2 className={classes.headertxt}>{data.naam}</h2> 

也试过 {review.image} {data.image.url} review.image.url

问候

Answer 1

我认为您需要检查您的 API（如果您使用 rest API）或 GraphQl Playground 的架构（如果您使用 GrapQl）的文档。

安装 Swagger UI 文档插件以检查架构。

这可能会解决您的问题。

Answer 2

也许这可以给你一些方向。

LINK TO STRAPI CONTENT API GET

这就是它应该为您返回的：

{
      "id": 1,
      "title": "Restaurant 1",
      "cover": {
        "id": 1,
        "name": "image.png",
        "hash": "123456712DHZAUD81UDZQDAZ",
        "sha256": "v",
        "ext": ".png",
        "mime": "image/png",
        "size": 122.95,
        "url": "http://localhost:1337/uploads/123456712DHZAUD81UDZQDAZ.png",
        "provider": "local",
        "provider_metadata": null,
        "created_at": "2019-12-09T00:00:00.000Z",
        "updated_at": "2019-12-09T00:00:00.000Z"
      },
      "content": [
        {
          "__component": "content.title-with-subtitle",
          "id": 1,
          "title": "Restaurant 1 title",
          "subTitle": "Cozy restaurant in the valley"
        },
        {
          "__component": "content.image-with-description",
          "id": 1,
          "image": {
            "id": 1,
            "name": "image.png",
            "hash": "123456712DHZAUD81UDZQDAZ",
            "sha256": "v",
            "ext": ".png",
            "mime": "image/png",
            "size": 122.95,
            "url": "http://localhost:1337/uploads/123456712DHZAUD81UDZQDAZ.png",
            "provider": "local",
            "provider_metadata": null,
            "created_at": "2019-12-09T00:00:00.000Z",
            "updated_at": "2019-12-09T00:00:00.000Z"
          },
          "title": "Amazing photography",
          "description": "This is an amazing photography taken..."
        }
      ],
      "opening_hours": [
        {
          "id": 1,
          "day_interval": "Tue - Sat",
          "opening_hour": "7:30 PM",
          "closing_hour": "10:00 PM"
        }
      ]
    }