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
おかげであなたを。私はこの問題を解決しました。 – dinhbao10t4
ようこそ。 –