加载的图像是'在ios Ionic Framework中不可见

Loaded images aren't visible in ios Ionic Framework

本文关键字:Framework Ionic ios 图像 加载      更新时间:2023-09-26

我是Ionic Framework的新手,但我已经面临图像加载的问题。

这是我通过获取响应从服务器获取图像的URL对象

我可以通过chrome的工具"检查元素"看到图像的布局,但我在页面上根本看不到它们,它们就是不可见。

也许我需要先将它们加载到缓存中,然后显示它们或smth?

所以,这是代码:

这是一个app.js文件:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: "/main",
templateUrl: "templates/main.html",
controller: 'ImagesDashCtrl'
});
$urlRouterProvider.otherwise('/main');
});

这是一个控制器.js:

angular.module('starter.controllers', [])
.controller('ImagesDashCtrl', function($scope, myImages) {
 $scope.images = [];
 $scope.loadImages = function() {
myImages.getDownloadedImages().then(function(images){
  $scope.images = images;
});
}
});

这是services.js:

angular.module('starter.services', [])
 .factory('myImages', function($http) {
  var myDownloadedImages = [];
   return {
     getDownloadedImages: function() {
  return $http.get('http://www.test1.com').then(function(response) {
              myDownloadedImages = response.data;
              return myDownloadedImages;
          });
}

}});

在main.html中,只有一个简单的图像重复,等等,我还在index.html 中使用"离子导航视图"

非常感谢

首先:您似乎从未执行过$scope.loadImages函数。

有两种方法可以参考图像

一种方法是手动下载它们,并将它们放在ionic应用程序中的图像文件夹中,然后您可以像在任何web应用程序中一样简单地引用它们。(它们是本地的)

另一种是你在互联网上引用它们。所以你使用图片的绝对url,它们就会被下载。

我推荐第一种方式。