AngularJS ng-repeat数组错误

时间:2016-02-18 06:40:09

标签: javascript angularjs

我是AngularJS的新手,我正在尝试使用node.JS。

我的第一次尝试相当简单。我使用数组来显示ng-repeat的图像。它正在工作,但出于某种原因,当我加载页面时,我得到一个错误。

这是我的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>

页面显示正确,但控制台返回;

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

我已经尝试将我的脚本标记(链接到angular的标记)放在页面顶部(在代码发生之前加载它)但是当我这样做时,我得到了两次错误。

我的ng-app只包含最低限度:

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

为什么我收到此错误?

1 个答案:

答案 0 :(得分:2)

使用ng-src而不是src代码中的img

参考:https://docs.angularjs.org/api/ng/directive/ngSrc

当您的网页加载时,浏览器会尝试加载img标记,其中包含您的模板所拥有的来源,即images/{{icon.file}},您的浏览器无法找到错误。