添加角度base64圖像不會顯示

Question

我有一個程序，用戶上傳圖像，看到預覽，然後可以單擊添加將圖像添加到列表。

到目前爲止預覽工作，但附加功能沒有添加圖像到下表行，什麼也不顯示...

問題

有人能看到爲什麼我的圖像不顯示如果最大插槽大於添加的圖像數量，它應該添加照片。

正如你可以看到下面的圖片應該被添加到表中的下一部分。

HTML

<div ng-repeat="campaign in campaigns" class="campaign-container"> 
    <div class="container"> 
     <h1>{{campaign.c_name}} {{$index}}</h1><strong>This Campaign you are allowed {{campaign.max_slots}} Images</strong> 
     <table class="table"> 
      <thead> 
      <tr> 
       <th>Select File</th> 
       <th>Preview Image</th> 
       <th>Add to list</th> 
       <th>Images</th> 
       <!-- <th>Remove Image</th>--> 
       <th>Save Campaign</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td> 
        <!-- UPLOAD IMAGE--> 
        <div class="upload-new"> 
         <input type="file" fileread="vm.uploadme" id="fileinput-{{ $index }}" onchange="angular.element(this).scope().uploadImage(this)"/> 
        </div> 
        <!-- END--> 
       </td> 
       <td> 
        <!-- PREVIEW IMAGE--> 
        <div class="preview"> 
         <img style="height: 100px; width: 100px" ng-src="{{campaign.preview}}" alt="preview image"> 
        </div> 
        <!-- END--> 
       </td> 
       <td> 
        <button ng-click="addImage($index)">Add image</button> 
       </td> 
       <td> 
        <div ng-repeat="slot in campaign.slots" class="slot"> 
         <img ng-click="addImage($index)" style="height: 100px; width: 100px" ng-src="{{slots.base_image}}" alt="show image here"> 
         <img ng-src="{{slots.base_image}}" /> 
         <button ng-click="removeImage(slots)">Remove Image</button> 
        </div> 
       </td> 
       <!-- <td>Remove button to be here</td>--> 
       <td> 
        <button ng-click="SaveImage()">Save to API</button> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

的JavaScript

 .controller('Dashboard', function ($scope, $http, $timeout) { 

     $scope.campaigns = []; 
     $scope.preview = ''; 
     // $scope.slots = []; 
     // $scope.maxSlots = maxSlots; 

     $scope.uploadImage = function (element, index) { 
      console.log(element); 
      console.log(element.id); 
      str = element.id; 
      str = str.substr(str.indexOf('-') + 1); 
      console.log(str); 
      index = str; 

      // console.log('we are here'); 
      input = element; 
      file = input.files[0]; 
      size = file.size; 
      if (size < 650000) { 
       var fr = new FileReader; 
       fr.onload = function (e) { 
        var img = new Image; 

        img.onload = function() { 
         var width = img.width; 
         var height = img.height; 
         if (width == 1920 && height == 1080) { 
console.log('we are here'); 
          $scope.campaigns[index].preview = e.target.result; 
          // $scope.preview = e.target.result; 
          $scope.perfect = "you added a image"; 
          $scope.$apply(); 

         } else { 
          $scope.notPerfect = "incorrect definitions"; 
         } 
        }; 
        img.src = fr.result; 
       }; 

       fr.readAsDataURL(file); 
      } else { 
       $scope.notPerfect = "to big"; 
      } 
     }; 

     $scope.addImage = function (campaign) { 
      if(!campaign) return; 
      if ($scope.length < campaign.max_slots) { 
       $scope.slots.push({ 
        "slot_id": $scope.length + 1, 
        "base_image": $scope.preview, 
        "path_image": "" 
       }); 
      } else { 
       window.alert("you have to delete a slot to generate a new one"); 
      } 
     }; 

Answer 1

你有你的觀點，你的模型之間的一些命名問題和一致性。更改addImage到這樣的事情：

$scope.addImage = function (campaign) { 
    if(!campaign) return; 
    if (campaign.slots.length < campaign.max_slots) { 
     campaign.slots.push({ 
      "slot_id": $scope.length + 1, 
      "base_image": campaign.preview, 
      "path_image": "" 
     }); 
    } else { 
     window.alert("you have to delete a slot to generate a new one"); 
    } 
}; 

和你結合這樣的：

<div ng-repeat="slot in campaign.slots" class="slot"> 
    <img style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="show image here"> 
    <img ng-src="{{slot.base_image}}" /> 
    <button ng-click="removeImage(slot)">Remove Image</button> 
</div>