Display image from byte array in blazor

Question

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?

It should have kind-of worked. Any errors in the F12 console? — Henk Holterman
– Henk Holterman, Commented Sep 5, 2021 at 12:30
And when you use Inspect (F12, Elements), how does the <img> look? — Henk Holterman
– Henk Holterman, Commented Sep 5, 2021 at 12:36
@HenkHolterman is it matter if I'm displaying the image in the client side? the image stored as bytes no paths — sameeh shadid
– sameeh shadid, Commented Sep 5, 2021 at 12:37
@HenkHolterman when inspect it it looks like this <img src="data:image/jpeg;base64,PHN2Z............(the bytes as base64)"/> — sameeh shadid
– sameeh shadid, Commented Sep 5, 2021 at 12:39

Józef Podlecki · Accepted Answer · 2021-09-05 13:36:03Z

9

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

answered Sep 5, 2021 at 13:36

Józef Podlecki

11.4k5 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Henk Holterman Over a year ago

svg would be a lot smaller and faster than jpg.

Henk Holterman · Accepted Answer · 2021-09-05 12:47:02Z

5

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.

answered Sep 5, 2021 at 12:47

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

2 Comments

sameeh shadid Over a year ago

the image was svg before got its bytes and I used svg instead of jpg but still the same thing.

sameeh shadid Over a year ago

Thanks a lot I tried to get a jpeg image bytes now and displayed.

Panthersoul · Accepted Answer · 2024-01-12 07:47:45Z

5

Try this in your code:

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

Where "imageBytes" is your byte[] image.

answered Jan 12, 2024 at 7:47

Panthersoul

611 silver badge4 bronze badges

1 Comment

Bronzato Over a year ago

Pretty good solution.

Collectives™ on Stack Overflow

Display image from byte array in blazor

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related