CODEWITHSUNDEEP
javascriptangularjs
MadeInDreams
MadeInDreams

Reputation: 2126

AngularJS ng-repeat array error

I am new to AngularJS and I am trying it out with node.JS.

My first try is fairly simple. I use an array to display images with ng-repeat. It is working but for some reason when I load the page I get one error.

Here is my html:

<footer ng-app="footIcon" ng-init="icons =[
{name: 'Node.js', file: 'node_ico.png', title: 'Serveur Web JavaScript'},
{name: 'AngularJS', file: 'angular_ico.png', title: 'Programmation Javascrit Angulaire'},
{name: 'HTML 5', file: 'html5_ico.png', title: 'Hyper Text Markup Language Version 5'},
{name: 'CSS 3', file: 'css3_ico.png', title: 'Cascade Style Sheet Version 3'},
{name: 'JavaScript', file: 'js_ico.png', title: 'JavaScript'},
{name: 'JQuery', file: 'jquery_ico.png', title: 'Write less do more'},
{name: 'Bootstrap', file: 'bootstrap_ico.png', title: 'CSS Template'},
{name: 'Arduino', file: 'arduino_ico.png', title: 'Votre programmation rejoint le monde physique'},
{name: 'Raspberry Pi', file: 'pi_ico.png', title: 'Ordinateur de poche propulsé par Linux'}
]">

<div class="container" >
<div class="row">

   <div ng-repeat = "icon in icons" class="col-lg-1 col-md-1 col-sm-3 col-xs-6">
   <img src="images/{{icon.file}}" alt="{{icon.name}}" title="{{icon.title}}">
   </div>

 </div>
 </div>
</footer>

The page is displayed correctly but the console return;

GET file:///C:/NODE/www/images/%7B%7Bicon.file%7D%7D net::ERR_FILE_NOT_FOUND

I have try to put my script tag (the one linking to angular) at the top of the of the page (to load it before code happen) But when I did that I was getting this error twice.

my ng-app only contains bare minimum:

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

Why am I getting this error?

Upvotes: 1

Views: 71

Answers (1)

TheRodeo
TheRodeo

Reputation: 465

Use ng-src as opposed to src in img tag.

Reference: https://docs.angularjs.org/api/ng/directive/ngSrc

What is happening is when your page loads, the browser tries to load the img tag with the source that your template has i.e images/{{icon.file}} which your browser can't find hence the error.

Upvotes: 2

Related Questions