如何添加角度的圖像JS

Question

我是新來的角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> 

Answer 1

您已經在做正確的事了。只要確保item.Image指向正確的圖像源。查看你的products.json文件來調整路徑。

Answer 2

檢出這些。

1. 您在瀏覽器中顯示的圖片是否正確？

2. 如果沒有，請確保'json/products.json'響應正確的json數據。

3. 如果是，請檢查瀏覽器中圖像標記的完整URL。完整的網址可能與相對路徑的預期原因不同。

ps。 @NicBright說，你完成了正確的角度js。