我如何在 React 中显示来自 api 的图像

Question

我正在尝试显示来自 API 的图像，但我失败了，我在后端使用 API 平台

这是我的 API 架构：

{
    "@context": "/api/contexts/Advertise",
    "@id": "/api/advertises/1",
    "@type": "Advertise",
    "id": 1,
    "title": "Eius vitae aut totam eius iste.",
    "description": "Aperiam quo nihil ad atque minima harum est. Omnis odio sint veritatis accusamus. Asperiores harum provident quas quas eum. Fuga rerum est error nemo voluptas aliquam similique.",
    "price": 1261,
    "published": "2019-08-30T20:50:06+02:00",
    "user": {
        "@id": "/api/users/13",
        "@type": "User",
        "username": "laurent03"
    },
    "images": [
        {
            "@id": "/api/images/1",
            "@type": "Image",
            "id": 1,
            "file": null,
            "url": "/images/5e22213525ba2416125688.jpg"
        }
    ]
}

当我做的时候

{
    <p>
        {post.user.username} //it works
    </p>
}

但是当我尝试这个时

<p>
    <img src={`http://localhost:8000${user.images.url}`} />   }  //it does not works
</p>

我不知道怎么处理这个案子。

Answer 1

请替换这个

<img src={`http://localhost:8000${user.images.url}`}

到

<img src={`http://localhost:8000${post.user.images[0].url}`}

它应该指向数组元素，然后指向对象属性。

我如何在 React 中显示来自 api 的图像

How can i display images in React coming from api

javascript

reactjs

api-platform.com