31

正如这里所解释的，AngularJS 指令 ng-src 用于防止浏览器在句柄被解析之前加载资源（例如图像）。我目前正在使用以下代码：

<div ng-controller="MyCtrl">
  <img ng-src="http://localhost:8081/media/{{ path }}" />
</div>

使用以下 JavaScript：

function MyCtrl($scope, $timeout) {
    $timeout(function () {
        $scope.path = 'images/23694c70-04d7-11e3-9ba8-73fb00de24c4.png';
    }, 1000);
};

正在从 Web 服务检索路径。由于这种延迟，浏览器会尝试加载http://localhost:8081/media/，这会导致 404。一旦检索到路径，浏览器就会发出正确的请求并加载图像。

在所有数据准备好之前防止加载任何资源的首选方法是什么？

请参阅jsfiddle以获取说明我的情况的示例。

4

6 回答 6

39

将整个路径放在 $scope 变量中。这种方式ng-src将等到您为其提供完全解析的图像路径：

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

function MyCtrl($scope, $timeout) {
    var path = 'https://si0.twimg.com/profile_images/';
    $timeout(function () {
        $scope.path = path + '2149314222/square.png';
    }, 1000);
};

小提琴

于 2013-08-14T15:01:09.260 回答
3

示例信息

让我们拿这个blogitem directive。上面的示例已经向您展示了如何设置默认值。

HTML：

<blogitem ng-repeat="item in items" 
          bg-src="{{ item.image }}" 
          caption="{{ item.title }}"/>

JS：

.directive( 'blogitem', function()
{
    return {
        restrict    : 'E',
        templateUrl : 'js/app/directives/blogitem.html',
        replace     : true,
        // pass these two names from attrs into the template scope
        scope       : {
            intro : '@',
            bgSrc : '@'
        }
    }
} )

HTML 模板：

<article>
    <img ng-src="{{ bgSrc }}"/>
    <p>{{ intro }}</p>
</article>

希望它对您的理解有所帮助ng-src。

于 2014-02-24T13:50:55.287 回答
2

我也遇到了同样的问题。我注意到的一件事是，如果 ng-src 的值未定义，则不会获取 img。因此，我创建了一个实用方法来连接两个参数并在且仅当两个参数都被定义时才返回一个值。见下文。

<div ng-controller="MyCtrl">
  <img ng-src="{{MyUtil.strConcat('http://localhost:8081/media/', path)}}" />
</div>

myApp.factory('MyUtil', function() {
    return {
        strConcat: function(str1, str2) {
            return (angular.isDefined(str1) && angular.isDefined(str2)) ? 
                (str1 + str2) : undefined;
        }
    }
});

function MyCtrl($scope, $timeout, MyUtil) {
    $scope.MyUtil = MyUtil;
...
}

小提琴

于 2013-11-01T10:50:21.740 回答
0

ng-src如果尚未填充数据，您可以将 设置为空字符串：

<div ng-controller="MyCtrl">
  <img data-ng-src="{{ path && 'http://localhost:8081/media/'+path || '' }}" />
</div>

当path未初始化时，条件将短路并转到该or部分并将其设置data-ng-src为''（空字符串），因此不会访问服务器。

于 2014-02-07T16:27:39.050 回答
0

最近，您可以像这样评估它：

ng-src="{{ methodThatReturnsString() }}"
于 2014-09-30T02:11:29.690 回答
-2

我确信 100% 的工作

首先，您必须像这样进行查询

select (select '../Images/'|| T_LANG2_NAME ||'.png' T_LANG2_NAME from T04222_T where T_LOG_ID = T04220.T_C_STATUS) TIMER from T04220 
where T_PAT_NO = '89004331' group by T_C_STATUS 
having max(T_ARRIVAL_DATE) = (select max(T_ARRIVAL_DATE) from T04220 where T_PAT_NO = '89004331');) then you write Code for Controller like this ( if (scope.T_PAT_NO) {
                debugger;
                $http({
                        method: 'POST',
                        url: '/T04205/GetTimerImage',
                        data: JSON.stringify({ PatientCode: scope.T_PAT_NO })
                    }).
                    success(function (data) {
                        debugger;
                        var newDataJSON = JSON.parse(data);

                        scope.TIMER = newDataJSON[0].TIMER;

                    });

然后像这样的html代码

<input id="imTimer" type="image" src="{{TIMER}}" style="width: 80px;height: 80px" />
于 2017-10-10T05:38:55.067 回答