javascript - Issue in AngularJS ng-repeat while accessing image -


i'm writing small program "add cart" page using angularjs, part of html code follows:

<div id="booklistwrapper" ng-controller="booklistctrl">             <form role="form">                 <div class="form-group">                     <input type="text" class="form-control" placeholder="search here...">                 </div>             </form>             <div>                 <ul class="list-unstyled">                     <li class="book" style="background: white no-repeat" ng-repeat="book in books">                         <div class="cover-image">                             <img src={{book.imgurl}}>                             <!--i've tried src="../img/{{book.imgurl}}" also-->                         </div>                         <div class="book-details clearfix">                             <h3>{{book.name}}</h3>                             <p>{{book.price}}</p>                             <ul class="list-unstyled list-inline">                                 <li>rating: {{book.rating}}</li>                                 <li>binding: {{book.binding}}</li>                                 <li>publisher: {{book.publisher}}</li>                                 <li>released: {{book.releasedate}}</li>                             </ul>                             <p>frodo, young hobbit playing around neighborhood...</p>                             <button class="btn btn-info pull-right" ng-click="addtokart(book)">add kart</button>                         </div>                     </li>                 </ul>             </div>         </div> 

the js file follows:

var booklistctrl = function ($scope) {     $scope.books = [         {             imgurl: "../img/lotr1.jpg",             name: "lord of rings i",             price: 786,             rating: 4.5,             binding: "paperback",             publisher: "nypublisher",             releasedate: "19th july 1956",             details: "story of young hobbit named frodo, tale of adventures"         },         {             imgurl: "../img/lotr2.jpg",             name: "lord of rings ii",             price: 786,             rating: 4.4,             binding: "paperback",             publisher: "nypublisher",             releasedate: "19th july 1956",             details: "story of young hobbit named frodo, tale of adventures"         },         {             imgurl: "../img/lotr3.jpg",             name: "lord of rings iii",             price: 786,             rating: 4.6,             binding: "paperback",             publisher: "nypublisher",             releasedate: "19th july 1956",             details: "story of young hobbit named frodo, tale of adventures"         }     ];     $scope.addtokart = function (book) {         console.log("add kart:body");     } } 

although code works fine , shows images items of array, there's console error says:

get file:///c:/courses/udemy/angularjs/html/%7b%7bbook.imgurl%7d%7d net::err_file_not_found 

the code directory in folder given in error(/c:/courses/udemy/angularjs/html) whereas js file, should search image in "c:/courses/udemy/angularjs/img" folder

you should use ng-src , here simple cart easy use , config . may .http://ngcart.snapjay.com/docs . hope help


Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -