CODEWITHSUNDEEP
blazorblazor-webassembly
sameeh shadid
sameeh shadid

Reputation: 131

Display image from byte array in blazor

I'm using blazor webassembly and I need to display an image that stored as byte array in the client side.

I tried

in C#:

imagesrc= Convert.ToBase64String(imageBytes);
imageDataURL = string.Format("data:image/jpeg;base64,{0}", imagesrc);

in markup:

<img src="@imageDataURL" />

but no image displayed just icon that no image.

is there any other way?

Upvotes: 9

Views: 16493

Answers (3)

Panthersoul
Panthersoul

Reputation: 41

Try this in your code:

<img src="data:image;base64, @System.Convert.ToBase64String(imageBytes) />

Where "imageBytes" is your byte[] image.

Upvotes: 3

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11305

I was curious which image format you specified instead of jpeg and like you said under @Henk answer it is svg as it starts with PHN2Z...

That doesn't mean you have to use some svg to jpeg converter, just adjust data uri type appropriately:

imageDataURL = string.Format("data:image/svg+xml;base64,{0}", imagesrc);

Heres quick blazor playground which displays data uri for various image files

Upvotes: 9

Henk Holterman
Henk Holterman

Reputation: 273701

A jpg file has a standard header. So even with different images I would expect the first few characters of the base64 to be the same.

When I convert a jpg to base64 it starts with "/9j/4AAQ"

So I think your data is not a (valid/complete) jpg file.

Upvotes: 5

Related Questions