CODEWITHSUNDEEP
htmlimageblazor-client-side
Zack
Zack

Reputation: 163

Blazor Webassembly image/jpeg content to html

How to get a image/jpeg (content type) file over http call in a service and then bind it to html with Blazor Webassembly?

In my case, it is coming from the MS Graph API (me/photo). With JavaScript before I would do a url.createObjectURL(blob) and then push that into DOM. Trying to figure out the Blazor-Client way of doing this...

Upvotes: 0

Views: 2106

Answers (1)

Zack
Zack

Reputation: 163

I was able to achieve this by the following:

Service:

//(Error checking removed for simplicity)

HttpResponseMessage responsePhoto = await _HttpClient.GetAsync(GRAPH_URL_ME_PHOTO_96);
byte[] byteArrayPhoto = await responsePhoto.Content.ReadAsByteArrayAsync();
ImageBase64 = Convert.ToBase64String(byteArrayPhoto);

Razor Page:

@inject Services.UserService Svc
<img src="data:image/png;base64,@Svc.ImageBase64" />

Upvotes: 2

Related Questions