2017-09-20 1 views
1

私はサーバーのマシン上に画像を持っています。私はanglejsを使用してイメージを取得し、UIで表示したいと思います。 RestControllerの画像をバイト配列に変換します。 angularjsでは、バイト配列を取得してから、バイト配列をhtmlの画像として表示する要求を送信します。しかし、画像はWebページに表示されません。以下は私のコードです:jhipster - anglejsのバイト配列を画像に変換する

@RequestMapping(value = "/images", method = RequestMethod.GET) 
public ResponseEntity<byte[]> getProductImage(String fileName) { 
    byte[] result = null; 
    File serverFile; 
    try { 
     serverFile = productService.getProductImage(fileName); 
     BufferedImage bufferedImage = ImageIO.read(serverFile); 
     // get DataBufferBytes from Raster 
     WritableRaster raster = bufferedImage.getRaster(); 
     DataBufferByte data = (DataBufferByte) raster.getDataBuffer(); 
     result = (data.getData()); 
    } catch (IOException e) { 
     e.printStackTrace(); 
    } 
    String mimeType = URLConnection.guessContentTypeFromName(fileName); 
    HttpHeaders headers = null; 
    if (mimeType != null) { 
     headers = new HttpHeaders(); 
     headers.setContentType(MediaType.valueOf(mimeType)); 
    }  
    return new ResponseEntity<>(Base64.getEncoder().encode(result), headers, HttpStatus.OK); 
} 

angularjs

vm.getByte = function(fileName){ 
     $http({ 
      method: 'GET', 
      url: '/api/images', 
      params: { 
       fileName: fileName 
      } 
     }).success(function(success){ 
      vm.imgFile = success; 
     }); 
    }; 

htmlコード

<div class="form-group"> 
<label>Image</label> 
<div class="form-group has-avatar" ng-if="vm.Product.productImg"> 
    <img ng-src="data:image/JPEG;base64,{{vm.imgFile}}" style="width: 200px;height: 130px;" /> 

現在の結果: result

答えて

2

は、Javaのフォローにコードを修正する必要があります:あなたの応答のための

@RequestMapping(value = "/images", method = RequestMethod.GET) 
public ResponseEntity<byte[]> getProductImage(String fileName) { 
    byte[] result = null; 
    File serverFile; 
    try { 
     serverFile = productService.getProductImage(fileName); 
     FileInputStream fi = new FileInputStream(serverFile); 
     result = Base64.getEncoder().encode(IOUtils.toByteArray(fi)); 
    } catch (IOException e) { 
     e.printStackTrace(); 
    } 
    String mimeType = URLConnection.guessContentTypeFromName(fileName); 
    HttpHeaders headers = null; 
    if (mimeType != null) { 
     headers = new HttpHeaders(); 
     headers.setContentType(MediaType.valueOf(mimeType)); 
    }  
    return new ResponseEntity<>(result, headers, HttpStatus.OK); 
} 
+0

おかげであなたを。私はこの問題を解決しました。 – dinhbao10t4

+0

ようこそ。 –

関連する問題