Question

我是棱角分明的新手。

我偶然发现了一个问题。我正在使用json作为我的数据而不确定我应该如何在我的代码中添加图像

<div ng-controller="myCtrl" class="container">

    <div class="col-md-8">

        <div ng-repeat="item in products" class="product col-md-4">

            <h3>{{item.title}}</h3>
            <img ng-src="{{item.Image}}" alt="..." class="img-thumbnail">
            <p>
                <br>
                <button type="button" ng-click="show = !show"  class="btn btn-success">View Product</button>
                <button type="button" ng-click="add_to_cart()" class="btn btn-danger">Add To Cart</button>
                <br>
                <span><b style="color: #ff0000">Size: </b> {{item.Size}} </span>
                <span><b style="color: #ff0000">for: </b> {{item.Gender}} </span> 
                <br>
            </p>
            <div class="description" ng-show="show">{{item.description}}</div>
        </div>
    </div>
    <div class="col-md-4">
        <div id="cart" class="col-md-12">
            <div id="cart_content" class="">
            <h4>Cart:</h4>
                <table id="test" class="table table-striped table-bordered">
                    <tr class="tr">
                        <th>Number</th>
                        <th>Title</th>
                        <th>Qty</th>
                        <th>Cost</th>
                        <th>Total</th>
                        <th></th>
                    </tr>
                    <tr class="tr" ng-repeat="pro in product">
                        <input type="hidden" name="someData" ng-value="{{pro.id}}" /> {{pro.id}}
                        <!-- <span style="display: none;">{{pro.id}}</span> -->
                        <td>{{pro.count}}</td>
                        <td>{{pro.title}}</td>
                        <td>{{pro.qty}}</td>
                        <td>{{pro.cost}}</td>
                        <td>{{pro.total}}</td>

                        <td>[<a href ng:click="removeItem($index)">X</a>]</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    var app = angular.module("myApp", []);

    app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {

        $http.get('json/products.json').success(function(data) {

                $scope.products = data; // get data from json       
        });

        var total = 0;
        var counter = 0;
        $scope.product = [];

        $scope.add_to_cart = function(){

            counter++;

            total = parseInt(total) + parseInt(this.item.price);

            $scope.product.push({
                id: this.item.id,
                qty: 1,
                title: this.item.title,
                cost: this.item.price,  
                total: total,
                count: counter
            });         
        }

        $scope.removeItem = function(index) {
            $scope.product.splice(index, 1);
        }

    }]);
</script>

Answer 1

你已经做得对了。只需确保item.Image指向正确的图像源。查看products.json内部以调整路径。

Answer 2

结帐这些。

您在浏览器中获得的图像是否正确？
如果没有，请确保＆＃39; json / products.json＆＃39;回应正确的json数据。
如果是，请在浏览器中查看图片代码的完整网址。完整网址可能与相对路径的预期原因不同。

PS。正如@NicBright所说，你使用角度js做得很好。

如何在角度JS中添加图像

2 个答案: