如何编辑图像 url 并在 react-admin 中显示它们答案

【问题标题】：How can you edit image urls and display them in react-admin如何编辑图像 url 并在 react-admin 中显示它们
【发布时间】：2021-12-10 21:45:39
【问题描述】：

我希望能够遍历一系列对象中的所有 url 并对其进行编辑，以便它们在使用react-admin-firebase 填充DataProvider 的react-admin 面板上可见。

我有一堆来自 Firebase 存储的 url，我想在管理面板中显示它们。麻烦的是，firebase 将这些文件位置存储在相对路径中，而不是公共可访问的路径中。即像gs://imagename.png 这样的东西，而不是像https://firebasestorage.googleapis.com/imagename.png 这样的可下载网址。

我尝试使用来自react-admin 的useQuery 和useDataProvider 挂钩，但它们似乎返回不适用的数据：对于useQuery，我尝试了getList 类型和空有效负载obj 和得到一个空数组。对于useDataProvider，我得到了整个数据提供者对象，但没有得到任何实际数据。

此外，当我尝试将动态值传递给 ImageField 组件时，我收到一条错误消息，提示 source 属性必须是 string 类型。我认为based on their docs 我应该能够制作一个自定义对象并将其作为道具传递给ImageField，但没有img 元素出现在DOM 中。

【问题讨论】：

标签： reactjs firebase react-admin

【解决方案1】：

（目前）无法从 Web 客户端中的 gs:// URL 加载数据。

如果您想通过 Firebase 在您的网络应用中显示来自 Cloud Storage 的图像，您需要为每个文件提供 get the download URL 并在您的 img 标记中显示这些图像。

【讨论】：

谢谢，我已经在我的实际应用程序中这样做了，但我认为在 react-admin-firebase 系统中可能有一些方法可以更轻松地处理这个问题。我试图弄清楚如何访问原始gs://... url 并将其更改为公共 URL 并将其传递给Field 组件。我想我必须通过CustomField 组件来完成。
即使您将该字段标记为公共，您也需要为其获取公共 URL。我认为不需要自定义字段，因为您可以从gs://... URL 获取下载 URL，如我分享的链接所示。
嘿@crevulus。这里还需要什么吗？
是的，因为问题是 react-admin 问题而不是 GCP/FB 问题。