使用 Firebase 存储在网页上呈现图像答案

【问题标题】：Using Firebase Storage to render images on web homepage使用 Firebase 存储在网页上呈现图像
【发布时间】：2021-09-28 10:35:30
【问题描述】：

我是 Web 开发和 Firebase 存储的新手。通常，如果我要创建一个包含公开图像的网站，我只需将该图像 URL 放入 <img> 标记的 src 属性中。也许如果我在 squarespace 上使用自定义内容或其他东西，那么有一种方法可以上传您的图像，这样您仍然可以以同样的方式添加照片？但由于我使用的是 firebase 托管，我想我会使用 firebase 存储来存储我的自定义内容。

因此，如果我有一个包含要显示的图像的主页，那么使用 Firebase 存储并调用 getDownloadURL 方法来获取一个 URL，然后我可以通过 Javascript 将其注入到我的 HTML 中是否有效？

我尝试了一个实例，似乎页面弹出，然后下载 url 进来（不出所料），但这只是给整个事情一种缓慢和滞后的感觉。也许只是感觉是这样，因为其他所有内容都在我的机器上本地，所以它毫不费力地弹出，并且当它们都被下载时看起来会更好？但这在网络速度和使用方面似乎有点贵，对吧？

也许我只是以错误的方式调用它（现在脚本在 <head> 中引用，这就是它的呈现方式。在呈现这样的内容方面是否有最佳实践？

【问题讨论】：

标签： javascript html firebase web firebase-storage

【解决方案1】：

如果图像是动态的，您应该使用 firebase 存储，但如果您指的是您身边的静态图像，我认为使用存储没有任何好处。您可以使用 Firebase 托管直接使用您的 JS 代码托管图像。

主机还使用 Google 全球网络来减少您这边的加载时间以及您的图片的加载时间。

【讨论】：

如何直接使用 JS 代码和 Firebase 托管来托管图像？
你可能有一个构建系统。例如，在react 中，您有一个构建文件夹，当您托管页面时会部署该文件夹。那里的所有东西都是托管的（甚至是图像等）。如果您使用的是静态 html，您只需将它们放在您部署的文件夹中，您就可以像在托管服务器上一样访问它们。