使用角度js顯示圖像

我想在Java控制器返回的頁面上顯示圖像。使用角度js顯示圖像

Java的控制器：

public FileSystemResource RetrieveLogo(@PathVariable("UniqueCode") String Code){ 

// get image file 

return fileSystemResource; 
}

在Java腳本控制，我做一個服務調用來獲取圖像。

的Javascript控制器：

$scope.logo = function() { 
     rest.retrieveLogoForMerchant({id: 'abcd'}).$promise.then(function(data) { 
          console.log("-------------success--------- " + angular.toJson(data)); 

          $scope.logoImage = angular.toJson(data); 
         }); 
    }

這裏控制檯打印 -

{ 「0」：「」，「1」：「」，「2」：「」，「3 「：」「」4「：」 \ U00 .......等}

的HTML

<img ng-src="{{logoImage}}" height="100" width="100"/>

上的頁面圖像顯示空白頁，並給出錯誤的控制檯 -

http://localhost:9090/%7B%220%22:%22%EF%BF%BD%22,%221%22:%22%EF%BF%BD%22,%2 ... 22％EF％BF％BD％22，％22246％22：％22％22，％22247％22：％22％22，％22248％22：％22 400請求）

建議我，我該如何正確顯示圖像。

感謝

來源

2015-02-11 Anita

你爲什麼不得到通過http圖片的URL（AJAX調用），併成功$scope.logoImage = data。 data是通過http檢索的圖像的URL。

來源

2015-02-11 11:09:01

我沒有得到你的觀點。你能詳細說明嗎？我正在做服務調用和成功，我將數據分配給$ scope.logoImage。 – Anita 2015-02-11 11:12:48

我想你是從服務器上返回服務請求中的整個圖像數據。而image-url應該分配給'ng-src'。因此，服務請求時，您的服務器應該只返回圖像的URL（字符串），而不是圖像本身。 – 2015-02-11 11:54:20

也應該是'ng-src ='logoImage''而不是'ng-src ='{{logoImage}}' – 2015-02-11 12:01:17

嘗試移除鄰近

$ scope.logoImage = angular.toJson（數據）的方法angular.toJSON;

並且還

我想你正在加載圖像通過二進制數據附加適當的圖像編碼到數據EG：NG-源= {{數據：圖像/ PNG; BASE64 ........ }}

來源

2015-02-11 11:31:44 NavyCody

我試過刪除angular.toJson。如果我將刪除它，那麼將添加其他角度資源參數（$ promise。$ resolve）。那就是爲什麼我加了這個。 – Anita 2015-02-11 11:38:58

我假設成功回調中的數據參數是從服務器傳輸的二進制數據。你可以粘貼服務/工廠邏輯 restLogoForMerchant方法的休息。 – NavyCody 2015-02-11 12:31:35

您需要設置正確的內容類型在Java控制器內部的反應，見下面的功能

public void displayImage(HttpServletResponse response, byte[] imageArray) throws ServletException, IOException { 
     System.out.println("Inside display Image function"); 

     if (imageArray != null && imageArray.length > 0) { 
      response.setHeader("Pragma", "no-cache"); 
      response.setHeader("Cache-Control", "no-cache"); 
      response.setDateHeader("Expires", 0); 
      System.out.println("Image Array is not null :" + imageArray); 
      response.setContentType("image/jpeg"); 
      OutputStream out = response.getOutputStream(); 
      out.write(imageArray); 
      out.flush(); 
      out.close(); 
     } else { 
      System.out.println("Image is null"); 
     } 
    }

比你需要確保添加數據的內容之前適當的頭，同時將其設置爲img標籤@Naveen已經指出它在他的答案中。基本上你需要有這樣的東西

<img src="data:image/png;base64,/*Your data part goes here*//>

你還需要編碼流到Base64之前分配給img。我在我的JSP下線，你可以改變它，以適應你的需要..

<img id="userProfileImg" height="150px" width="150px" name="userProfileImg" alt="../img/user_default_pic.png" src='data:image/jpg;base64,<%=Base64.encode(/*Blob data returned from database*/)%>'/>

來源

2015-02-11 11:48:48 aProgrammer

使用角度js顯示圖像

回答

相關問題