0

I am trying to learn AngularJS, and after watching a video on Lynda.com I have an issue I cannot figure out. When I add an image using the ng-src the way the video instructed, and also how the angularjs site instructs, the code doubles.

HTML:

<section class="memberInfo">
  <div ng-model="members">
    <h1>{{members[whichItem].name}}</h1>
    <img ng-src="images/faces/{{members[whichItem].shortname}}.png" alt="Photo of {{members[whichItem].name}}" />
    <div class="info">
      <h2>{{members[whichItem].jobtitle}}</h2>
      <p>{{members[whichItem].bio}}</p>
    </div>
  </div>
  <a href="index.html">&laquo; Back</a>

controller.js

var memberControllers = angular.module('memberControllers', []);

memberControllers.controller('TeamController', ['$scope', '$http', function ($scope, $http) {
  $http.get('js/data.json').success(function(data) {
   $scope.members = data;
  });
}]);

memberControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) {
  $http.get('js/data.json').success(function(data) {
    $scope.members = data;
    $scope.whichItem = $routeParams.itemId;
  });
}]);

What shows in the browser is this

<img ng-src="images/faces/fname_lname.png" alt="Photo of First Last" src="images/faces/fname_lname.png">

And a 404 error, with the path skipping the short name and just leaving .../images/faces/.png

What am I doing wrong here?

user1791449
  • 53
  • 1
  • 1
  • 7
  • 6
    That's correct. For the image to actually show, the browser loads it using the `src` attribute. Using `ng-src` is just how you define that in Angular to parse the source, hand over control of events and such. – Alex Jun 18 '15 at 15:28

1 Answers1

1

ng-src remains an attribute, but it doesn't actually show the image (it's just a way for Angular to parse the source for the image, and place the parsed source in an actual src attribute).

I would assume Angular doesn't remove the ng-src attribute after loading the actual src for several reasons (although this may be conjecture):

  • There's no reason to (it's an added operation, and Angular is already operation-intensive as it is), and
  • It may need to reference ng-src later during the infamous scope "dirty checking", especially if any two-way bound information is used inside the ng-src
Josh Beam
  • 19,292
  • 3
  • 45
  • 68
  • So is there any way to not have the 404 error? I forgot to add that into my question, just updated it. – user1791449 Jun 18 '15 at 15:50
  • @user1791449, I need to see the rest of your code. The fault isn't in `ng-src`, it's somewhere else in your code. – Josh Beam Jun 18 '15 at 15:51
  • Posted more of my code. Anything else you need to see? – user1791449 Jun 18 '15 at 17:04
  • After trying to look at things through fresh eyes today, I am still no closer to finding the error. I did notice though after downloading the example files from this video, this exact same error occurs. Somewhere in my code it delivers the ng-src image, but then somehow tries to find the same file, with the name removed, leaving images/faces/.png nothing before the .png – user1791449 Jun 19 '15 at 18:05