[FIXED] Unable to bing blob image when using Primeng avatar

Issue

In official doc images are selected from assets directory

        <div class="card">
            <h5>Image - Badge</h5>
                <p-avatar image="assets/showcase/images/demo/organization/walter.jpg" pBadge value="4" severity="danger" styleClass="mr-2" size="xlarge"></p-avatar>
        </div>

I would get image from my component ( blob image ) .

    let imageBlog = await (response as any).blob().catch(this.unhandledFetchError); // Get image data as raw binary data

    this.photo= URL.createObjectURL(imageBlog) 

<p-avatar [image]='photo'></p-avatar>

It’s not working

When I open the image in browser I get it.

Solution

Maybe it needs to be sanitilized

this.photo = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(imageBlog))

Inject sanitizer

constructor(private sanitizer: DomSanitizer) {}

Answered By – Gurkan Yesilyurt

Answer Checked By – Timothy Miller (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published