My http call:
return http.get(url).map(res => res.text());
Component:
httpService.getCustomBanner('path').subscribe(
data => {
this.image = 'data:image/jpeg;base64,'+ data
})
HTML:
<div *ngIf = "image">
<img [src]="sanitizer.bypassSecurityTrustUrl(image)"/>
</div>
I'm not getting any errors, and the API is returning a type of image/jpeg, but nothing is rendering.
Edit: Taking out the data:image/jpeg;base64 along with dee zg's answer is what fixed it.
In your http call you need something like this (not tested, writing from head):
.map(res => res.blob())
.map(blob => URL.createObjectURL(blob))
that will return you a DomString which you can feed into your img source.
image variable now seems to be populated, but I'm getting that generic image icon.Thanks. I tried so many posts but this one works for me. For others, I will post my experience here. For my testing, my asp.net core API returns a student list with byte[] data type image which is mapped to Blob in Angular. In addition, in Angular field names in a class must start with a lower case for reference regardless of their declaration. eg.
Student.Photo; // is declared in a Student class.
students: Student[];
//Call an api and put the result into students.
students[0].photo worked. But students[0].Photo caused an error of 'undefined'.
For working sample of multiple images, please see the below codes.
--Angular component HTML -----
<tr *ngFor="let item of studentList">
<td>{{item?.given1}} -- {{item?.surname}}</td>
<td>
<img [src]="getImangeUrl(item?.photo)"/>
</td>
</tr>
-- in component.ts file
public getImangeUrl(photo:Blob): any {
if (photo === null)
return "";
else
{
let objectURL = 'data:image/jpeg;base64,' + photo;
return this.sanitizer.bypassSecurityTrustUrl(objectURL);
}
}
Finally it works for me. Most examples are only for a single image which is very easy to do it as the above example. Happy coding!
Try using the following
in your component define a function
import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private sanitizer:DomSanitizer){}
sanity(url)
{
return this.sanitizer.bypassSecurityTrustUrl(url)
}
and in the template you can use
<div *ngIf = "image">
<img [src]="sanity(image)"/>
</div>
hi I am not sure about [src] but you can use the following code and test if it works for you
<div *ngIf = "image">
<img src="{{sanitizer.bypassSecurityTrustUrl(image)}}"/>
</div>
