angularjs - 如何在没有新服务器请求的情况下将下载的图像从父路由传递到子路由
问题描述
我正在使用 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>
当用户然后单击博客项目以打开博客时,我不想发送另一个请求来获取图像以呈现博客标题,因为它与缩略图中的图像相同。有没有办法(优雅与否)缓存图像,然后将其传递到博客详细信息页面而不重做服务器请求?
解决方案
如果您的缩略图和实际图像相同,即您没有以不同的方式保存它们,那么两个页面中的 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
推荐阅读
- javascript - 在本机 Webview Cordova/Phonegap 应用程序中读取图像文件 iOS 11.3 和 11.4
- php - Route::redirect 使用自定义 url ( /products/{name} )
- r - 如何使用 R 中另一个数据集的值替换一个数据集中的值?
- graphql - 如何在一个请求中使用不同的参数多次运行一个突变?
- javascript - 无法从 React Native App 的项目文件夹中导入 .js 文件
- c - 从回调(mqtt)访问配置
- python - 从文件中删除多个新行到 1 个新行
- python - 从 CSV 文件中提取包含另一个 CSV 文件中的任何值的行
- php - 数组中的语法错误
- reactjs - Expo Camera 仅使用 React Navigation 打开一次