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
Post a Comment