首页 > 解决方案 > 如何在没有新服务器请求的情况下将下载的图像从父路由传递到子路由

问题描述

我正在使用 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>

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

标签: angularjsionic-frameworkrxjsfirebase-storage

解决方案


如果您的缩略图和实际图像相同,即您没有以不同的方式保存它们,那么两个页面中的 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

推荐阅读