Reactjs 使用AWS Amplify React获取多个图像

我正在构建一个组件来接收一组对象，在这些对象中我有一些图像。 我对Amplify不是很有经验，但我理解的是，您从未收到公共URL本身，您收到一个密钥，使用该密钥您请求最终URL。我的问题是如何获取不同的图像并填充我的html img标记

到目前为止，我掌握的代码是：

const fetchOrganizations = async() => {
  const { data } = await API.graphql(graphqlOperation(listOrganizations))
  setOrgs(data.listOrganizations.items);
}

它的输出是一个类似于此的对象数组

createdAt: "2020-09-12T10:44:11.003Z"
description: "b-1"
name: "b-1"
id: "cd032448-4498-4571-aa28-0e6379c48ae1"
logo: {
   bucket: "blablabla"
   key: "/public/us-east-1/blablabla.jpg"
   region: "us-east-1"
}
status: "CREATED"

我正在循环这个数组来构建我的html

{orgs.map(org => (
      <div>
        <ul>
          <li>{org.name}</li>
          <li>{org.logo && <img src={getOrgLogo(org.logo.key)} />}{org.name}</li>
        </ul>  
      </div>
    ))}

我得到的结果是

<img src="[object Promise]">

---

那么，这样做的正确方法是什么？

您是否使用AppSync生成GraphQL查询？@yudhiesh是的。查询本身没有问题。

<img src="[object Promise]">