javascript - angularjs 在等待 Controller 时设置图像

Question

我有一个 angularjs 应用程序。

在一个 Controller 中，我正在等待图像源地址 - 我从 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>

我现在的问题是:

当网站打开时，在等待此服务时，它会在浏览器中显示“NoImage”图标。此后图像将被正确查看。

但是在我的控制台中我也遇到了这个错误:

Resource interpreted as Image but transferred with MIME type text/html: "http://localhost:160/cms/app/zkLib/f/img/". 

在我的服务器上，我有图像“loading.gif”，我想在等待服务时显示该图像。

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

Answer 1

您在控制台中收到错误的原因是，在对 header.php 的请求完成并且 Angular 渲染 {{header.banner}} 之前，它尝试仅加载“zkLib/f/img/”。您可以通过将整个相对网址放入 {{header.banner}} 范围属性来解决此问题。例如...

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

并使 header.banner 成为完整的相对路径...

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

现在，在请求完成之前，图像 src 将是一个空字符串，并且不会显示损坏的图像图标或抛出错误。如果你想在 Controller 加载之前显示加载图像，你可以设置 src，就像这样......

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

在请求完成之前，src将是loading.gif文件。请求完成后，ng-src 将启动并显示您的 header.banner 图像