Javascript angularjs在等待控制器时设置图像

我有一个angularjs应用程序

在一个控制器中，我正在等待一个图像源地址——我从一个PHP服务获得这个地址

controller.controller("LayoutCtrl", 
["$scope", "$http", "$route", 
function($scope, $http, $route) {
    $scope.$route = $route;
    $http.get('zkLib/services/header.php').success(function(data) { 
        $scope.header = data; });
}]);

header.php如下所示：

$result = array();

$result['index'] = db()->loadSetting('index_page');
$result['banner'] = db()->loadSetting('site_banner');

echo json_encode($result);

因此，在我的模板中，我写了：

        <div ng-controller="LayoutCtrl">
            <div desc="header">
                <a desc='hp_link' href="#{{header.index}}">
                    <img desc='banner' ng-src="zkLib/f/img/{{header.banner}}">
                </a>
            </div>
        </div>

在我的服务器上，我有一个图像'loading.gif'，我想在等待服务时显示它

---

如何解决这个问题？有人能帮忙吗？

控制台中出现错误的原因是，在对header.php的请求完成并呈现{{header.banner}}之前，它试图加载的只是“zkLib/f/img/”。您可以通过将整个相对url放入{{header.banner}}范围属性来修复此问题

<img desc='banner' ng-src="{{header.banner}}">

现在，在请求完成之前，图像src将是一个空字符串，它不会显示损坏的图像图标或抛出错误。如果您想在控制器加载之前显示加载图像，您可以设置src，如下所示

<img desc='banner' ng-src="{{bannerImage}}" src="/path/to/loading.gif">

---

在请求完成之前，src将是loading.gif文件。请求完成后，ng src将启动，并且当控制器实例化时，

$scope.header

仍为空时，将显示header.banner图像

这使得

ng src=“zkLib/f/img/{{header.banner}}”

被计算到此相对路径：

'zkLib/f/img/' // translates to "http://localhost:160/cms/app/zkLib/f/img/"

---

您需要做的是保持

ng src

为空，而

$scope.header

为空

#1） 一种方法是这样写： #3） 但我更愿意在控制器内创建链接： 然后简单地使用它：

<img desc='banner' ng-src="{{ banner }}">

---

谢谢-展位正常运行。img标记：

然后返回图片的完整url，它与动画一起工作：）

'zkLib/f/img/' // translates to "http://localhost:160/cms/app/zkLib/f/img/"

<img desc='banner' ng-if="header" ng-src="zkLib/f/img/{{header.banner}}">

<img desc='banner' ng-src="{{ header && 'zkLib/f/img/' + header.banner }}">

$http.get('zkLib/services/header.php').success(function(data) { 
  $scope.header = data;
  $scope.banner = 'zkLib/f/img/' + data.banner;
});

<img desc='banner' ng-src="{{ banner }}">