1

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?

1

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.