我正在使用AngularJS为“添加到购物车”页面编写一个小程序,HTML代码部分如下:

<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, the young hobbit is playing around the neighborhood...</p>
                            <button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to Kart</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>


JS文件如下:

var BookListCtrl = function ($scope) {
    $scope.books = [
        {
            imgUrl: "../img/lotr1.jpg",
            name: "Lord of The Rings I",
            price: 786,
            rating: 4.5,
            binding: "paperback",
            publisher: "NYpublisher",
            releaseDate: "19th July 1956",
            details: "Story of a young hobbit named Frodo, A tale of his adventures"
        },
        {
            imgUrl: "../img/lotr2.jpg",
            name: "Lord of The Rings II",
            price: 786,
            rating: 4.4,
            binding: "paperback",
            publisher: "NYpublisher",
            releaseDate: "19th July 1956",
            details: "Story of a young hobbit named Frodo, A tale of his adventures"
        },
        {
            imgUrl: "../img/lotr3.jpg",
            name: "Lord of The Rings III",
            price: 786,
            rating: 4.6,
            binding: "paperback",
            publisher: "NYpublisher",
            releaseDate: "19th July 1956",
            details: "Story of a young hobbit named Frodo, A tale of his adventures"
        }
    ];
    $scope.addToKart = function (book) {
        console.log("add to kart:body");
    }
}


虽然代码可以正常工作并显示数组所有项目的所有图像,但是仍然存在控制台错误,其中指出:

GET file:///C:/Courses/Udemy/AngularJS/html/%7B%7Bbook.imgUrl%7D%7D net::ERR_FILE_NOT_FOUND


代码目录位于error(/ C:/ Courses / Udemy / AngularJS / html)中给出的文件夹中,而实际上,它应从JS文件中的“ C:/ Courses / Udemy / AngularJS / img”文件夹中搜索图像

最佳答案

您应该使用ng-src,这是易于使用和配置的简单购物车。可能对您有好处。http://ngcart.snapjay.com/docs。希望对你有帮助

关于javascript - 访问图像时AngularJS ng-repeat中的问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43069486/

10-12 03:56
查看更多