一尘不染

了解AngularJS ng-src

angularjs

正如解释这里的angularjs指令NG-
SRC是用来防止浏览器加载资源(如图像)车把得到解析之前。我当前正在使用以下代码:

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

使用以下JS:

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

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

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

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

谢谢,

马丁


阅读 223

收藏
2020-07-04

共1个答案

一尘不染

将整个路径放入$ 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);
};

小提琴

2020-07-04