Javascript AngularJS镜像多个请求

我目前正在开发AngularJS应用程序

除了加载图像外，一切正常

在我看来，我使用了以下调用：

现在奇怪的是，有两个请求被触发：

http://localhost:8080/MyContext/content/img/views/portrait/.jpg

及

http://localhost:8080/MyContext/content/img/views/portrait/example.jpg

第一个值的employee.lastName为空。我无法解释为什么会发生这种情况，尽管我使用的是ng src指令

有什么想法吗

提前感谢您的支持

我的资源代码

var employeeService = $resource('/MyContext/rest/employees/:employeeId', {}, {});
employeeService.findById = function(id) {
    return employeeService.get({employeeId:id});
};

在控制器中，我调用：

$scope.employees = EmployeeService.findAll();

---

您是否使用$resource服务加载员工数据？如果是这样，$resource服务将首先返回一个空对象，它将解释第一个请求。一旦接收到来自服务器的数据，该数据将被复制到以前的空对象中，并触发绑定值的更新。在您的情况下，这将是img的ng src，并将触发第二个请求。

如果您不想使用$http的成功回调，您可以在employee.lastName上添加一个观察者：

$scope.$watch('employee.lastName', function(lastName) {
        if (lastName) {
            $scope.defaultPicture = '/MyContext/content/img/views/portrait/'+lastName+'.jpg;
        }
    });

首先选择控制器中的默认图片：

$scope.defaultPicture = '/MyContext/content/img/views/portrait/default.jpg'

在您的视图中使用它：

<img ng-src="{{ defaultPicture }}" title="{{ employee.lastName }}"/>

完成后，将调用以获取默认图片，该图片将由浏览器缓存，当资源employeeService准备就绪时，图像将自动更改

---

我只是在我的项目中做的。

你能安装一个plunker吗。这应该行得通。是的，我正在使用资源。我已经将它们添加到我的第一篇文章中。还有什么选择？或者如何避免这两个调用？您可以从服务调用中预加载映像。如本例所示：