如何在角度 JS 中添加图像

How to add images in angular JS

本文关键字:添加 图像 JS      更新时间:2023-09-26

我是角度js的新手。

我偶然遇到了一个问题。我正在为我的数据使用 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>

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

看看这些。

  1. 您在浏览器中获得的图像源是否正确?

  2. 如果没有,请确保"json/products.json"响应更正 json 数据。

  3. 如果是,请在浏览器中签出图片标记的完整网址。完整的 url 可能与相对路径的预期原因不同。

附言。正如@NicBright所说,使用角度 js 是正确的。