如何在没有新服务器请求的情况下将下载的图像从父路由传递到子路由

Posted 2023-03-22

【中文标题】如何在没有新服务器请求的情况下将下载的图像从父路由传递到子路由

【英文标题】：How to pass downloaded image from Parent to Child route without new server request

【发布时间】：2020-11-04 07:15:35

【问题描述】：

我正在使用 firebase 和 Angular+Ionic 来构建博客应用程序。当我加载博客列表时，我向 firebase 发送请求以获取每个博客缩略图的图像下载 url，然后将 img src 属性设置为返回的 URL。我用这样的管道做到了这一点：

<!-- refToPic converts the blog photo reference into a download url-->

<ion-img style="height:250px; object-fit:cover" src="blog.headerPhoto | refToPic | async"></ion-img>

当用户然后单击博客项目以打开博客时，我不想发送另一个请求来获取图像以呈现博客标题，因为它与缩略图中的图像相同。有没有办法（优雅与否）缓存图像，然后将其传递到博客详细信息页面而不重做服务器请求？

【参考方案1】：

如果您的缩略图和实际图像相同，即您没有以不同方式保存它们，那么两个页面中的 URL 将相同。在这种情况下，您不需要任何额外的缓存，因为浏览器已经这样做以提高性能。

此外，如果底层 WebView 不缓存图像，您可以使用ionic-img-cache 来实现此目的。您将需要 3 个额外的插件：

 ionic cordova plugin add cordova-plugin-device
  ionic cordova plugin add cordova-plugin-file
  ionic cordova plugin add cordova-plugin-file-transfer