Question

我正在使用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

代码目录位于错误地给出的文件夹中（/ C：/ Courses / Udemy / AngularJS / html），而从JS文件中，它应该在“C：/ Courses / Udemy / AngularJS / img”中实际搜索图像“文件夹

Answer 1

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

访问图像时AngularJS ng-repeat中的问题

1 个答案: