ASP.NET - Kontrolka Image i wyświetlanie tablicy bajtów byte[] pliku graficznego

Spróbujemy w tym artykule zbindować plik graficzny przechowywany jako tablica bajtów byte[] do kontrolki asp:Image, tak by bez problemów został wyświetlony na stronie.

O co w ogóle chodzi?

Z sytuacją przedstawioną we wstępnie najczęściej mamy do czynienia w kontekście plików przechowywanych w bazie danych, dajmy na to, zdjęcie profilowe użytkownika. W kodzie programu operujemy na takim pobranym z bazy zdjęciu, jako na tablicy bajtów, której w sposób bezpośredni nie możemy w żaden sposób przekazać do kontrolki Image, dostarczanej przez framework ASP.NET. Czyli trzeba sobie poradzić nieco inaczej.

Z czego skorzystamy?

Z pomocą przychodzi nam fakt, że do atrybutu src zwykłego HTML-owego elementu <img />, do którego summa summarum sprowadzi się ASP-owa kontrolka Image, nie musimy przekazywać wyłącznie adresów do pliku, ale również sam plik zakodowany przy pomocy Base64. Operacja taka ma swoją zdefiniowaną składnię:

Jak widać, przydatny będzie również typ MIME pliku graficznego, dlatego zawsze w dobrym guście jest przechowywanie tego parametru w bazie danych, razem z interesującym nas zdjęciem.

Jak przekazać byte[] do własności ImageUrl kontrolki Image?

No tak... ale to wciąż nie jest rozwiązanie naszego problemu, bo gdzie tu tablica bajtów? Na szczęście tablicę bajtów łatwo możemy przekonwertować do kodu Base64 i tym samym, zadanie mamy niemal wykonane. Konwersji dokonamy przy pomocy metody Convert.ToBase64String(). Jeśli więc chcemy przekazać do kontrolki Image, plik który posiadamy pod postacią tablicy, możemy wykonać to w sposób następujący:

Oczywiście nie musimy robić tego w code-behind strony, ale wszystkie inne realizacje tego pomysłu, będą bardzo podobne do tego co widzimy powyżej. I tym prostym sposobem, możemy wyświetlać zdjęcia pobierane z baz danych pod postacią tablicy bajtów byte[].