Issue
I'm getting from my backend an image (in blob) which I need to display in an img tag.
template.html
<img class="image" [src]="selectedImage.imageStream" />
component.ts
getDocument(requestPath: string): Observable < any > {
return this.http.get(`${Config.apiRoot.uri}${requestPath}`, {
responseType: 'blob'
as 'json'
})
}
** ** ** **
getAndAssignImage() {
this.getDocument(this.selectedImage.imageSrc).subscribe({
next: (streamResp) => {
const imageStreamReader = new FileReader();
imageStreamReader.addEventListener('load', () => {
this.selectedImage.imageStream = imageStreamReader.result;
}, false);
imageStreamReader.readAsDataURL(streamResp);
}
});
}
Somehow, even if I'm binding to src
property, the generated html has the base64 image in the data-src
attribute:
<img _ngcontent-btp-c316="" class="image ng-star-inserted" data-src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD...">
Somehow the image is not displayed and I guess it's because the base64 is set in the data-src
attribute instead of the src
property, which I'm binding.
I've already checked the base64 is valid and copy/pasting it in a plain html file with just the img src display the image.
What's the problem? Why the img tag has my base64 string in the data-src
attribute instead of src
?
Solution
After a lot of research we found the issue. We are using OneTrust and the auto blocking feature was preventing the image to display.
The specifics are here and here but the fix for us was just adding the data-ot-ignore
and the optanon-category
class in order to prevent the OneTrust blocker to mess with this image tag. So the image tag in the end looked like this:
<img data-ot-ignore class="image optanon-category" [src]="selectedImage.imageStream" />
You can find how to fix videoplayer issues here
Answered By - cjg
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.