英文:
Render byte[] from Java API as an image in Angular 2
问题
我已经陷在这个问题上有一段时间了,非常感谢任何帮助。
图片以Base64存储,我就是无法正确设置:
我在我的 ProductRestController 中有以下 API:
@GetMapping("/{id}/image")
public byte[] getProductImageByProductId(@PathVariable Long id) {
return productFacade.getProductImageByProductId(id);
}
我的 product.service.ts:
getProductImageByProductId(productId: number) {
return this.http.get(ServiceConfig.serverBaseUrl + `/product/${productId}/image`, {responseType: 'arraybuffer'});
} // 我猜问题可能出在 responseType 上?我尝试过所有类型。。
在我的 select-product.component.ts 中:
getProductImage(product: Product) {
this.productService.getProductImageByProductId(product.id).subscribe( base64 => {
if(base64) {
this.base64 = 'data:image/jpg;base64,' + base64; // this.base64 是一个字符串
}
else {this.base64 = 'assets/no-image-icon.png';}
});
}
最后是 HTML:
<img [escape]="false"
pTooltip='<img style="max-height: 100%; max-width: 100%" src="{{base64}}">'
tooltipPosition="right" (mouseover)="getProductImage(product)"
src="assets/eye-icon.png" style="max-width: 100%; width: 80%; margin-bottom: 3px">
它应该在你悬停在图标上时,在工具提示中显示图像,但无论我在服务中设置什么样的 responseType,它都会给我一个解析错误,响应中会有一些类似于乱码的内容,样式如下:
%�S���cs5���&D�TdE£t6�U�e���u��F'���������������Vfv��������7GWgw��������5!1AQaq"2...
感谢您的帮助!
英文:
i've been stuck on this one for a while and any help is appreciated.
Images are stored as Base64 and i just can't get the setup right:
I have the following API in my
ProductRestController
@GetMapping("/{id}/image")
public byte[] getProductImageByProductId(@PathVariable Long id) {
return productFacade.getProductImageByProductId(id);
}
my product.service.ts:
getProductImageByProductId(productId: number) {
return this.http.get(ServiceConfig.serverBaseUrl + `/product/${productId}/image`, {responseType: 'arraybuffer'});
} // I guess it has to be something with the responseType? I tried all types..
in my select-product.component.ts:
getProductImage(product: Product) {
this.productService.getProductImageByProductId(product.id).subscribe( base64 => {
if(base64) {
this.base64 = 'data:image/jpg;base64,' + base64; // this.base64 is a String
}
else {this.base64 = 'assets/no-image-icon.png';}
});
and finally the html:
<img [escape]="false"
pTooltip='<img style="max-height: 100%; max-width: 100%" src="{{base64}}" >'
tooltipPosition="right" (mouseover)="getProductImage(product)"
src="assets/eye-icon.png" style="max-width: 100%; width: 80%; margin-bottom: 3px">
}
It should show an image in a tooltip when you hover on an icon, but whatever responseType i'm setting in my service, it will give me a parsing error with in the response some gibberish in the style of :
%�S���cs5���&D�TdE£t6�U�e���u��F'���������������Vfv��������7GWgw��������5!1AQaq"2...
Thank you for your help!
答案1
得分: 1
你应该使用 responstype 为 blob。因为你返回的是字节而不是 base64 字符串。
因为这个 Java 的 getmapping 告诉你 "byte[]"
@GetMapping("/{id}/image")
public byte[] getProductImageByProductId(@PathVariable Long id) {
return productFacade.getProductImageByProductId(id);
}
getProductImageByProductId(productId: number): Observable<any> {
return this.http.get(ServiceConfig.serverBaseUrl + `/product/${productId}/image`, {responseType: 'blob'});
}
export class SelectProductComponent {
constructor(private sanitizer: DOMSanitizer, /*other params*/) {}
public someMethod(product: Product): void {
this.productService.getProductImageByProductId(product.id).subscribe(data => {
var reader = new FileReader();
const blob = new Blob([data], {
type: 'image/jpeg'
});
// EDIT: Don't use function. my bad
reader.onloadend = () => {
const untrustedData = reader.result;
this.base64 = this.sanitizer.bypassSecurityTrustUrl(untrustedData);
}
reader.readAsDataURL(blob);
});
}
// also you can use ObjectURL if you
// just want the image and don't need the conversion to base64
public someOtherMethod(product: Product): void {
this.productService.getProductImageByProductId(product.id).subscribe(data => {
const blob = new Blob([data], {
type: 'image/jpeg'
});
const objectUrl = URL.createObjectURL(blob);
this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);
});
}
}
英文:
You should use responstype blob. since you return byte and not base64 string.
Because this Java getmapping tells you "byte[]"
@GetMapping("/{id}/image")
public byte[] getProductImageByProductId(@PathVariable Long id) {
return productFacade.getProductImageByProductId(id);
}
getProductImageByProductId(productId: number): Observable<any> {
return this.http.get<Observable<any>>(ServiceConfig.serverBaseUrl + `/product/${productId}/image`, {responseType: 'blob'});
} /
export class SelectProductComponent{
constructor(private sanitizer:DOMSanitizer, /*other params*/){}
public someMethod(product:Product):void{
this.productService.getProductImageByProductId(product.id).subscribe( data =>{
var reader = new FileReader();
const blob = new Blob([data], {
type: 'image/jpeg'
});
//EDIT: Don't use function. my bad
reader.onloadend = () => {
const untrustedData = reader.result;
this.base64 = this.sanitizer.bypassSecurityTrustUrl(untrustedData);
}
reader.readAsDataURL(blob);
}
}
// also you can use ObjectURL if you
//just want the image and don't need the conversion to base64
public someOtherMethod(product:Product):void{
this.productService.getProductImageByProductId(product.id).subscribe( data =>{
const blob = new Blob([data], {
type: 'image/jpeg'
});
const objectUrl = URL.createObjectURL(blob);
this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);
}
}
}
}
答案2
得分: 0
关于将Base64编码的字符串作为响应返回,您怎么看?
@GetMapping("/{id}/image")
public String getProductImageByProductId(@PathVariable Long id) {
byte[] image = productFacade.getProductImageByProductId(id);
return Base64.getEncoder().encodeToString(image);
}
注意:如果您的数据库中有以Base64编码的图像,只需将其作为响应返回即可。
英文:
What do you think about returning base64 encoded string as response ?
@GetMapping("/{id}/image")
public String getProductImageByProductId(@PathVariable Long id) {
byte[] image = productFacade.getProductImageByProductId(id);
return Base64.getEncoder().encodeToString(image);
}
Note: Is you have images as bas64 in the db, just return it as response.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论