Display picture as a binary data from database

Question

Goal:
Display the picture in frontend by retrieving the binary data from the database.

Problem:
The picture is not enable to display in frontend when I retrieve the data from database.
The process of retrieving the data and to display it in frontend do not work. What part of the code am I missing?

Info:
*"https://img.stackshare.io/service/7374/react-redux.png" is the logo that is used in sql code

Thank you!

<div class="text-center">  
    <h1 class="display-4">Welcome</h1>  
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>  
  
    <img src="@ViewBag.Data" title="@ViewBag.Data" />  
</div>  


    public IActionResult Index()  
    {  
        var datainByte = GetData("SELECT TOP (1) [ImageBits] FROM [Test].[dbo].[Test]");  
        string data = Convert.ToBase64String(datainByte);  
  
        ViewBag.Data = string.Format("data:image/png;base64,{0}", data);  
  
        return View();  
    }  
  
  
    private Byte[] GetData(string query)  
    {  
        DataTable dt = new DataTable();  
        string constr = "Server=;Database=;Trusted_Connection=True;MultipleActiveResultSets=true";  
        Byte[] result = null;  
  
        using (SqlConnection con = new SqlConnection(constr))  
        {  
            using (SqlCommand cmd = new SqlCommand(query))  
            {  
                using (SqlDataAdapter sda = new SqlDataAdapter())  
                {  
                    cmd.CommandType = CommandType.Text;  
                    cmd.Connection = con;  
  
                    con.Open();  
                    result = (Byte[])cmd.ExecuteScalar();  
  
                }  
            }  
  
            return result;  
        }  
    }  



USE[Test]  
GO  
  
CREATE TABLE [dbo].[Test](  
  
    [ImageName] [varchar](50) NOT NULL,  
    [MimeType] [varchar](50) NOT NULL,  
    [ImageBits] [varbinary](max) NOT NULL,  
)  
  
  
INSERT INTO [dbo].[Test]   
(  
    [ImageName],   
    [MimeType],   
    [ImageBits]  
)  
VALUES   
(  
    'UserGroupImage',   
    'image/png',  
    CONVERT  
    (  
        varbinary(max),  
        '0x89504E470D0A1A0A0000000D49484452000000C8000000C80802000000223A39C90000000467414D410000B18F0BFC6105000000206348524D00007A26000080840000FA00000080E8000075300000EA6000003A98000017709CBA513C00000006624B474400FF00FF00FFA0BDA7930000000774494D4507E3071A12151F749F3498000033B24944415478DAEDBD67741C4976EF796F6466798B0250F0962040EF9B4DD324DBB1BD9FD668461ACDCCEA3DADF4A4D51EED7BBB7BCEBE2FDAB3E7EC7BBBE7BC5DE96925CDAEA49991665A3D3DED7D37BB9BCD269BAEE92D086F085340795F959911B11FB250288020089228C2307FA79B0724AAD244FE33E2C68D1BF722E71C7474E61BB2D017A0B33CD185A553147461E914055D583A454117964E51D085A553147461E914055D583A454117964E51D085A553147461E914055D583A454117964E51D085A553147461E914055D583A454117964E51D085A553147461E914055D583A454117964E51D085A553147461E914055D583A454117964E51D085A553147461E914055D583A454117964E51D085A553147461E914055D583A454117964E511017FA0296009C71C638A3C03927048980481071A12F6B71A30B6B66E40C0DF9D2FEE1D4D8403211913329554E534A9964144C66D1E290CA6A2DD5CD764F85D968D1DB7006F4469902A33C3496EE3A1BEA38131CEA8EA762B2926505695A1140FB194509AD4E435593AD6D6BE98A8D25A5D51641D43BB149504F6EAB4155EE1B489CFBDAD77ED21F1849539513029303DE4C9AE18C33068288AE32D3BA5DE55BF7577AEBACFA18A9A10B0B0020E44B1FFF64F8FCD7BE4820030004111000F87441F19B2A8C0394565A1E7CBA7ACB6395369761A16F68E1B9DF85A52AACFD64E0EBDFF60F75C5000073929A02E7DAFFDA1FA07549533FC90190314E08AED8E0DEFFA3E6FA55CE85BEB305E6BE16562AAE1C79EFFAD10FAEA7E30A21D3473DCE3867800424A360340B06936030095465D93455B22C9B56A9C2910092C2EF0063BCB4DAF2D44F9AD7EE2C27C2FD3B2CDEBFC20AF9D29FFEB2FBE29171CE386AAAE21C1035712001BBDB58D3E2A85DE9A86AB2394B4D268B201973C24A2554FF50F27A47ACEB6C28349E460024931A6294DB5CD2D33F6DD9F258E57DABADFB5458FEA1D47B7FDFD179264808E6A67A98EB6F2423A96AB2AFDD59DEB2A9A4ACC6623009373B0855F9F860F2DC21DFB943BE883F833869B833C6AD76E9997FD3B2F5F1CAFBD39CBF1F8515F2A5DFFAAFED5D67433955010080D66F35AC763DF87475CBA692B91BE08CF2D1BEC4C137FA2E1FF373CEF332628C3B4A8CAFFC79DBEAED650B7DC70BC07D27AC64547EEFEF3ACE1F1E2353072FAB53DAF96CED834F573B3CC63B396C4C39F466FFD10FAE2B32CB1F99515E5E6BFDC1FFB4A6A6C5B1D0F77DAFB9BF84A5CAECF35FF51C7E67B0D071C028AFA8B73DF993E6B66DA577E3E49433F49BB7060EBDD5AFC83C3FFA5195ADDD59FEEA5FACB63AA485BEFB7BCAFDB5087DEE90EFF847437CAAAAAA9A6CAFFEC5AA353BCAEED2756E3009FB5EADDFF57C2DE6FDF30044C06BA702273F1DE6EC3E7A81E1BE12D6D840F29BB707B2695A68629754989FFF93D6BAB6F9713B494661EF2BF56B7694B109192122A3FCF84743435DF1856E807BCAFD222C5561C73EBA3E3690CC1B409C73A3597CF4078DCD6BDDF37822ABD3F0D80F1A4BAB2D93DA2218F1674E7C32A4CA6CA19BE1DE71BF08ABFB42E8FCA1B19CBB9C0300700EDB1EAFDCFC7005CCB737A0AAD9FED08B75A244F2E62B225C3EEE1F688F2E7433DC3BEE0B6165D3EAF18F86533105B5DB4560945737DB77BD502B1A8AD2021BF7795B3696F0824E2B1553CE7C35AA2AF74BA7755F08ABF752A4F7621885FC20080693B0E7A5BAD22A4B91CE68B14B3B9EAD31D9C4C24EABE37470A4F77EB1B496BFB0A8CA2E1D194B2795DC648D0367BC79BD7BF583C5F55B36AF73AFD850D06921C6C3D96BA7820BDD1EF788E52FACC070BAE7522467B32370009345DCFE54B5C95ADC20478359D8F24885C124E43A2D04CEA1EB6C30199517BA49EE05CB5F58BD97C3DA429EF6574659FD6A67F3FAF99C09DE8CC6B5AEEA667B81A505BE81E4486F62A19BE45EB0CC85A56469D7B91055596EEAC74194C8FADDE5C5EEAE34AC4E43EB364F41142A6692EA7D32375CE6C20AFAD2D73B63938B778C7B2ACD2B3696DCB30B685EE7B63A0DB9753304CE61A03D924DD3856E98A2B3CC8535782D160F65F3C1521CA0618DCB596ABA6717E0ADB779EBAC9C72CD7946088C0D26A381CC42374CD159CEC262945FEF88AACAC48C9F8364202B3696DCCBED3426AB58DBEA80893866444C44E4F1C1E442B74DD159CEC24A27D4919E44DEC4E19CDB5C86AA26FBBDBC0644A86AB20B12C92F4BAB320B8FEB3DD6522612C844FCE9C225E7F25AABABF44EC2ADEE064FA5D96415276686C0188CF625A8BACC831D96B3B0FCD793A9B89277342062459D759650E322E12C35596C22A3934A0A8F67547999DBEFCB792774783CA3AA3C3725E440042CAFB716EE7A98114679C49FF10FA59231599404B7D7545E63B99B7DF4669BD8B4D69D8A2BE984CA54CE394F271439CB8CC55A4F5A142C5B6151950746527CD27007492276F72DC6C1883F73FCA3A1CBC7FC117F86AA1C114C56B1AED5B1E3D99A959B3D77B6E5C660129EFDB72DDB9FAE1EEE8EF55E8CF45F8D2463723C94B5BB97F3BED6652B2C5561517F366F3203E7928158ECB3DD6F6038F5DEDF77749C0902002222700E988CC9574EF807AE459FFCF18A079EAC22B7EAF066C464156B573A6A573AB63E5615F2A5477AE356E77256152C63615195A593EAE49410C0641367D97B934DA9077EDDDB713A58D02D210020A0206232AA1CF8758FB3D4D8B4CECD39476D2734014424020A73EEC9440329AFB396D75917BA798ACEB21516A35C29349039184D82D17CD3FBED3C1BBA72DC7F330B8C089888C8EFFCCD354FA519108900024122A22812934D7494186D2E83C922BACA4DAE3293C52119CDC29DF56DCB86652B2C3943952C2B8C0E2522B99991445576F5843F9BA6B3F84E11311AC84C7541F189DF0022108206B3687588CE52536593ADA6C551D9682BA9301B4DC22D670CCB8F652BAC6C9A2A595A98B6431090DCC4BB2267A87F3875CB1DCB4850987284822F70E09C67524A26A90446D23D17C28281D89C52598DB576A5A3618DB3B6C5617319EE1F852D5B61519515BA8E003829CCDE3115CE21BFF7E166B98A6E01422E0FCD44062446792C988DF8B3DDE74346B350566B6DDDEC59BDA3B4B2D12E15271E7A51B16C8575439A509CC5D52D88C46C95F2117937CD83C561727B20E6FFC8CD21A77C0B734AD37A3839CB863A63439DB1530746566C746FDC57D1B0DA65B62DDBC687652C2C49228244269F3502671319AE6EC06816EA573B3BCF0673E2B889AA0C26A1C46B4282B974B78C33952B32CBA45455668C712D5D0D16A602D44E8EA045DCC723D9335FF9AE9C08D4B53AB63E5EB57A7BE9BD890CBBF72CCFBB0200C9244C1B71189D6D37F2DA1D6567BE1C0DF9D23733F039E3DB1EAF7CF8FB0D8420639C33E08C53C6B349351ACC26A272D897F1F52702A3A9A83F934EAA8C7224487022531B000020A220829CA19D6743FD57232B3696EC7CB6A67943C9F21B1C97AFB00C44340850A02445A6B3ECBEAA6CB2EDFD5EFD27FFD4954DD369DAE21C18654D6BDDBB5FAC7394CCE0BBAF6AB66B1F5365964E28415F7AB82B36D8111BEE8E87C7D28ACC00A030B30D220822AA0ABF7A22D07F35B2618F77F7F375DEFA65E5DC5AB6C21244948C93DD0022A4626A3C9475DE24990C223EB0BF0A01BE797B20E44B33964B48C4394806B26A5BD9133F6EF6549A67392322484622198D0E8FB1718D4B55583C941DEC88759F0FF55C0C0747D35A1F8653E59549AA273E1EEEBB1479F8FB0DEB777B0BAF7949B37C852510B355E4F9042088D9B49A8C2AB3B585813CF87475C31AD7E563E37D9723F1882C08E8A9B4AC7AC0B36A7BD9EDA68B1125E2F69ADD5EF3DA9DE591F14CC799E085C3BEA1AEB89CA6284061CC050A3036987CF76FAF0D77C5F7BD5A7F677994161BCB4758C99862300AF9375E349012AFB9C0760755E5E98432FB41906065A3ADA2DE2A676836430941A345BC4B034810D15365DE5955B361AFB7E742E8F497A3BD17C3D91425C2E4E0480494D3F4DBF707C787924FFF748536B62E6984BFFCCBBF5CE86B9807FAAF463EFC7FBBAC0EA9AC26178C8204C7AF27BBCE85727D0302A7BC7A85A371ADEB96474344512246B3683009735F07BC2506A3E0ADB7AD7AA0B4B2D19E49A9117F86523EA5EB020C0CA706DAA32595664FA56549A7985CF2233A55F9B943BE37FECBD5AB27FCA3FD53B6ECB9CA4C52414C306330DA9F58F0942F26ABB86E77F90FFFE7B5CFFC618BA7D2CCE894C21744C0D1BEC45B7FDD7EFE1BDF5407EF1263690B4BC9B223EF0DBEFBB71D81E1141218EE8E29D949DD94555BCC7629FFDC10213C96CE661645E8A6C521ED7AA1F647FF71FDA6872B44110BFCFE9C0818F167DEFFBB8E53074696AEB696B0B0E40C3DF456FF17BFEECD2414222022FAFA13896836FF016799C9556A9A4CCB4130E84B87C7D20B7DE113D78350DD6C7FE5CF573DF3872DEE7213D3B6882102E7846032AE7CF28BEEA5ABADA52A2C254B0FBED1FFF51BFD8A4C9120702DBF5976B87B7234345BC5CA261B2F588349C594A1CED8425FFB148C6661E7F3B53FF81FD736AE75713EA12D00423015573EFD45F799AF4697629AC925292CC6F8894F870FBF33A0AA2C6F9B0370254B0BF78212016B5A1CA28413E12D4055DEDF1EA5EAE24A5285088D6B5DDFFFF76B36EEF36ABBA573D74F3019573EFD45F7A563FE85BEC6DB66490AABFD64E0E06FFA559921E2447A3E8E889B1EAE58B3634A72A2DA9576AB638A9935D4158B85EE5DBE175561D93495B394DDAAD7F1549A5FF8E3B6079EA822796D712004E361F9D39F77F55F89DCC3069E07969E1F6BA427FEE92FBB131139B7F082C0398812D9F14CCDA3BFDB6899EAC6F4545ABCF5B66828A4EDF9220483A3E9FE2B11777945512F92313E3690EC38131CEE8AA512AA2062598D65EDCEF2BA568720DEF465B63AA5A77EBA02114E7E36529877393092FEE89FBA7EF73FAC2DAD32CFF102169C25E6C74AC6948FFFB1ABF752984C44DC71CE2583F0C8F71B1FFDDDC61B230544038987E5EEF321D402591054851B4CC2AA074A8B57E546CED0E31F0DBDFFB3CE4BDF8E8DF625832329FF506AA03DD6713A904DD1CA46DB2C7B1B25A350B7CA150B6547FBE2B96B0640C4C87886A97CC5A69279F4AB1595A53414720E273F1DBE72D24FF291A09C1382BB5FA8DDFB4ADDCD9E56F37AB7CD65C88F868440FFE570602455A48BA42A3FF2EEE027BFE80E8FA591A020A22012412402C144583EF89BBECFFEB967F66C335687F4F44F57ACDE3E99D31B1090C0D983A397BE1D5F8076BF239692B086BB63273E1962944F16C0E1B0715FC5DEEFD54BC69BF601DE7A6B5D9B934DD8EB4830ECCF5C395E2C73B8E742E8C8BB835461D37B440424080867BE1ABD7CF416FA70788C4FFC417345832DE76BE08088D9343DFCCE40B068AFC4FCB26484A52AECE4A7C3E1B14C61A59AA675EE277ED46CB1CFB63C6C30096B76968906CC5B2D9CC1C523E311FFFC67E6501576F6A02F1155A6C7B64F18E3882867D8A92F466EB96A59D9687BF4078D468B90F3357020028EF4C44F7E3672CB79C06260C908EB7A47ECF231FFE43E41C6ED2586C77EAFC9EDBD75B2AB960D25E535D6FCF320028E0D24AE9E98FF4E2B1E9287BA6258D8A8F970E7893F0981B181A47FF8D67EDA353BCA36EDABE053835ACF1FF28D2E8564934B43588CF20B87C71211B9B027D8F67855D33AD75CBEEE2C33ADD9513659821E80AAFCBB0323F3EE854F46E5644C9912977C83A98D88728626C2D95B1E4D3290DD2FD695D74E2972111ECF9C3BE45BFC9DD6D210566024D5713A38999088F2F25AEBB6FD73DDF08E08EB7697BBCB4C8C4F765AA33DF1D35FCEB3535B3212D14060D6826A937B11E780B7CEBA6D7F352193E338205C3DE10F8D2E9685A99BB13484D57D211C1A4B174498C086BDDEDB4AFF5F516F5BBBAB5CCBF39E2F7972FAC0C8894F862F1C19EB3C1B8C05B3772F3287C7E8F69A6E7118CE4D5671EED17C1BF6782B1B6D93E338626834DD792E5484669E4F96808354C9D2EEF321AA726D9B3267DCED35AFDB557E5BBBFF88809BF6792F1D198B06732949B5DA49EFFFAC0311058994559BD7EDF66E7DBC72C6A8F63962B24A4D6BDD7D9722B37C86315EBBD2515A3DD7B7C2ED356DDA5731695721A82AEF3C13DCFA58E5BDCFF5357796408F15F16787BB6305AE2B68DDE229ABBDEDAD07D52B1C1BF6550040C1B0829C03A55CCED0A1AEF867FFDCFDD65FB50747EE7C944184CD0F575434586FD6F931C62D7669DBFE2AA3F93634B17A4799A7CA3CD9691118EE8E877C8B7A345C02C21A1B4CC4C3727E6B83C12CB46DF3DC81039A08F8C093D565355636D506CA655E101001DBBF0B7CFEAB9E4C52BDE3AB2DAFB36E7DAC0A1061AAB4380746B9D124ECFD5E7DDB56CF6D1DD353695EB9C50379571C623C921DEE59D465799680B082A36955CEA5F7E08C7B2ACC771C126E734A56870437B3811090E0E563FE8ED3775EF146CED291DE3867BC70A4668C0B225635DB5FFC77AD7B5EAE17A4DB6B764270E5668FD132593D4555F8486F7C31575D5EEC3616A5DC3F94620CB4B541CEA1BCCE3AF712F3D318EE8EFB061233782F0BB664C919F5CA09FF9A1D65775671AEEB6CE8EAC9004EE4A7040022E2E6472ADAB695D6B539DD65A63B2B8F58DD6C737BCDBE81446E06C361AC3F2967E86D0DA9F792C52E2C5566932E720E88E0A9348BB7F9C6E7098FA5B3693AFDC9E6FFCE011010D13F94CA66E81D082B16CA1E7977309354F3EB398CF18656E7D3FF4DCB5D2686B43A0C15F5D6D1BE8436C620422C94CDA6D5452BACC53E1432CAE57C15670441C4BB293238C3D8C10B7E98F493B13B703D30C64F7C32DC7725420A0A614806F2C013D5779F6E543490D26A4BE166D7644C997D9BE4C2B2D885C539A774C26AE58004EFE61D3559C5E93ED5990626834998256AEA66F45C089FF878A850918CF2E68D25ABB697CE4B53383CC6C9856D04254BB3A93B9F64149BC52E2C98DACD20C0DDE42EAB68B0393C4636A3D15B103151D3E2305A6E4FBEE1B1F417AFF5C6C3324EE468E08CDBDD863D2FD5CEBE463E772C768908980F86E50CE822DE67B1048485050B1A8CF2CC5DBCA6A55596350F96C1CD1F87A68675BBCA6F2B83683AA11EF8756FFF95C8648FC20110B73E5ED9BC7EDE2A8D214ECFB0B49867858B5D5884A028917CBD104AF9DD2C930922EE7CAEA67EB593AA33745B9C7122909DCFD6D4AF71CDFD98AACC8EBC3B70EE6B5F61BA22C6787D9B63E773B5F318A79A8C2953BA2804B2889FDE22BE34EDFA443417041C73C643BEF4DDD4822FADB6BCF4A76D6DDB4A898054E58C72CE38A39CAACC6415F7BD5AFFD0CB7573F7BE52951DFF78E8F03B838CF2C2901EAB437AF8FB0DEEF2F9AC5F170B660BF7188A1259CC4B3A8BDDDD60300865B556443F40CE78F70D245331E56E52B25437DB7FF73FAC69FF2E70E584DF7F3DA564A9D9265635DB37EEAD685EEF9EBB978151FEDD67235FBCD62B67687E819C734082BB9EAF6DDB3A3F36BB862AB3C0702A9F3B87736EB689B79B00E75EB2D88505089E0A331130E7642218F2A57DFD89BBCCF5637319B6EDAFDAB0C79B8C294A869A6CA2C52EDD967B4CC9D2EF3E1FF9E2B5DE4C529D74872270C6D7EE2ADFF9FC7C0E8200108FC8A37D09249A729133B0BB8D269B2EACBBA0A2C16AB689A9988288889049AAEDDF05566C2CB9FB2767300977369AA413CAA13707BE7DFFBA92A593B354044679C36AE7933F699EF7BE64A03D1A1A4B13CD80E70000A5D5168371F10E858BDDC60280B26A4B4985B930254BC7E96070E122DD02C3A9F7FEAEE39BB707149915FA3E18E5554DB6E7FFB8B5FCF6232F664791D9E563E34A66B21E8220627D9BE35E968ABD5D9680B02C0E435341522B8218184D7DF7F9F0BDF7E230CAAF9D0AFCEBFF79F9ECD73ECE0A6781C0282FABB1BCF027ADB52B1DF37EDE81AB91EEF3219CE89E38E70E8FA1B6CD798F6FFFB65802C24284964D1EA345CCD782070EA70E8CF45C08DFCBCB484695836FF4BFF15FAE5EEF881144B841552FFF595BD33A7731CE7BF89DC1645429C827008D6BDC6577B1B4750F5802361600D4B539EBDB9C9D6783DA5B8B049351E5ABD77BCBAA2D73D9A5739730C607DAA307DFE8EF3A1B649417E63F060046B9B7CEFAC29FB4AED8386FBED0C2539FFC6CB8F36C6872FD9183C124ACDD557E67C117F78C457D7179CC3671DBFE4A8349E005190DFA2E470EFCBA27152BEE426C2C983DF4E6C06BFFE9D2B5EF029C0116AA8A03A3BCA6C5FEBDFF7E55CBA6F9571500749C0A1E7977905196DF40C6285FB1A1A4A508229E5F96468F05006DDB4A5B36965C3EEECF5BAC8878F6A04F329027FEA0B91875255371E5CA31FF894F8787BA629CF1E9C9DF194782EB7797EFFF51739152B4F75F8D7CFCF3AEC9F427132B4EBB5FAA5DFCE55216FBF5E53159C53DAFD40D764613E189DD85089CC3C9CF46527175FF8F9AE6712E968A2BDDE743273F1BE9BD14566546084E59F9E6C01837DBC49DCFD63EF4725D31BC949C43EFC5F07B7FDF3136909C54150722E0AEE76B9B8B60C9CD3BC817F34AE65418E387DF1EFCFC5F7A2865859E6ECE7965836DD7F3B56B7696D9EEA2EB62944703D9CE73C10BDF8C0DB447E50C9D664E0100679C73A86CB43DF6C3A6D50F96DE71C8E12C6453EA9983BE6FDE1C088DA50B57B539E7DBF6573DFB6F572EFEEE0A9696B000209BA69FFEA2FBF8C7435AA6B5FCBF33CA4503A96B756CDC57B172B3C7556A9C7B5C39A33C1953467AE39D67829D6743FEA1A4AA727243A125ADA3B23AA58D7B2B763D5F9BCFFB3DE5231C06AF455331A5AECD6175186E370A5955D8E0B5E8D10F87DA4FF815994D53D5BADDE5CFFF71AB738994175862C20280545CF9F25FFB8E7F3C441576E3082588E8A934D7B63AAB57D8AB9AEC2515669355940C64F2939CAB0A97D36A364DE311796C2039DC131FEA8C05465299A4AA8526E7143525A6948B06B26283FBA197EA9AD6B967ECA854995D383276E05F7A1331B9BAD9DEB2A9A4AED5E9ADB7DA9C86D967708CF1645419EE895F3DEEBF7C6C5C0BEAC282F83044D8F268C5933F5EB1848A562C3D610140364DBF7D6FF0D05B03E9A43A3D128173C6813320029AADA2D529D9DD4687C790CF73C4288F87E578289B49A9729AA6932AA51CA7D5379C5CEB05CEB82891CA26DBF627ABD7ED2EBF59D45E26A51E7E7BF0C8BB8399B48A885A1CA9D12CB8BD666F9DB57A85BDC46B767B4DB9603D00AA303943632139EACFF80612D73B63FEEBC94C8A22C2346FBED122EC7CAE76DFF7EAE72B60F0DEB024850500AAC2AE1CF77FF3F6C050571C389F21AC9403D7EE8D039F52E2120010C9C4FC7D6AD9B7FC7719E7C0C168116A5B1C1BF755AC7AA0D45162BCD9D01618491DFC4DFFD9AF7D4C2DE84439F0099B0C0968A52E8C6641CB454355AE2A4C2B5CAD85DC4CABDCA97DB1ACC6F2F0EFD46FDC57B9E4EACE2D55616984C733273E193AFDC5682C9845D4AA7E03C0DCCAEF1626189AF817CE3963204AE82A3735AF77AFDD595EBFCA397B57111C49BFF9D757BBCE858880B3C59D4EE87BCA6971AA213791A89773B0B90C1BF678773C5BE3ADB5DED98EB18565690B0B00A8CA87BA6267BE1CBD763A180D64A8CAB502A7732C44A3A556671C808364248E12636DABA3656349E33AB7C76B9ACB0C209B523BCE042F1E19EFBD148E4764CEF874F7C4DCC8D705B6BB0D2BB778B63D5E55BFDA598C59E7BD61C90B4B83AA2C309CEEBB12EE3E1F1EEE89C782593943738574A7DB60005AD7C0810860348B1687E4A9307BEB6DF56D8EEA150E57B9E90EC61D394B7DFDC9AE73C1BE4B91D1FE4422225395E7CE8E080898EF440B7EE05AFFC4000918CD4269B5A5754BE9EAED9EAA66C7921BFBA6B14C84954791593C94F5F5277D03095F7F429BEBA90AE79C2300115010519404AB532AAFB3965659BC7556B7D76473198C26E16EF6FF68700E725A0D8CA687BA62D73B636303C958309B49AAD98CCAE984CDA7ED8A251C110D26C1E63294565B6A5B1C756DCECA269BCD65B8AD7D1C8B96E526AC42B4E4FD4A86AA0A638C03A228A2202211886424069350D4474829CFA6D4745C8D0432B150564ED36C4A55148608922418CC82C124383CC6920AB3C52E194CC2922E227723CB59583A0BC8D21EC875162DBAB0748A822E2C9DA2A00B4BA728DC460006E73735F4735EEFFB80591A0110C83D6F84FCF52CB6473057612919E5E887FDFE319960411EFE09048938DC064F95A5BAD959526E5E1E9E9899E01DDF8D5EFE2E34A3C70B095A6C92CB6BAE6CB455D6DB0D86A26FFA8B8752DFBE3F984C52E0E0AC30EF79AEDEB86836DDCF5958B272FE6BDF606786883863961324284AE8F29A363C52B9E3E91A6711628517017CE072E8D8FB2337EC959D78D91089801687D8B8A964EFCBF50D2BE67F2B5821E968E6D46723D130E58C7B573AB73F51BBF4840500442082884440006474CA88A0F5C34C85C0F5F457BFEA1BE94FBCF4DFB6BAEF2261FABD219BCC9E3C309C8C51006E761A1ED85F63B1DCA24190A0202011090070C6D9647612D41670102015552E7D3536DC157FF1CFDA566F28EEAE07414041249C7161917958EF28C815B1AACD667788131566793AA90687D2A904D5922CB41F1E7779CDCFFF7885B8B8AB366692F2F1F7AF8F8FC800DC55635DB3BBE296C202980CD5725698CA6BF2254FB92AB3C85826322E03A020426830F9E9CFBBCBFEE3FAB279CD3933038BD2C37DFBC2E2201870DF0F9AD66E2A611315CFA8CA863A235FBED6D3DF9E4482C8E1D221DFD6472AEB1A6C0B7D83B3818084A096E19DDCE61BCF286FD95EF6DC4F9AF3F36ACE782C983AF1C1C089CFFD54054124BEAEF885E3E38FBD50B7D037BA00DC6158BE281169AA71BA724BB9D9427EF5BF5F8E0428124C06E5C18EE88DC2628CA5E34A2AA132C60491986C92C52ACD6EECAB0A4D25946C4A658C11413059458B4D1284D91C2594B2545CC92455C6982010B35D324F3D0BA34C515836A34E0EE88CCB199A4DAB8060308A73511912349AA6E42A35599C4FFCA4351E96CF7F1B210272CA7B2F84B34F561BA766EFE000725A49C61445561189D12C581C06499ACD3C6294A5934A3AA90280C52E99AC129912F05A7070CE9589DAE648D06014A6CD1629654A3657E2559004492254658A9CFB176D697CDA575485E673921181CC2519C97CEEF7A86C76D5B7DA43E3618120A33C3CB5D224676CB83B72EE90AFEF4A2C1E5618E34444BBDBD0B0DEBD695F654D83FDC6672967D4AE73E317BFF58FF4253309554B3D65718835ADCE8DFB2A1A57B96F1C6AA942FB2E072F1C191BEC4CA4622AE38C10622F31D4AF736FDA5759DB983BCBE095C081DF0CC8191A8BA8DA134A85E4B7FFEF2BA20036AFF9853F6A73CC12DCC7A7FE3CF5128C56E3EAEDA5978E47B896343B9095655628AC583075E188AFE3743030925564860846AB50D16C5FB7A772D5C612E30DCF8C733ED21D3EF395AFFF5A34115101C05E6A58B9A574DBE3D5B990209C329DCA24B31FFD43877F348B00568FF1D93F6A2B714F31767BCEFB0FBE35A855CA58FD9077DFF3F5E1D1F8C7BFEC4E2618021089EC79B571558169A864942F5FEBEAEB48108294F10D8F55EDDA5F73CBF76E3E85250868B64DB68BAAE6F3840155E8E9CF07BE7AE37AC82F4F247F054088F8B283EDF14B87FD8FFE41D3B6BD154241A7928A66BE78ADEBD417E399142B7C812263D9E1CEC4E5A3FE875E6DD8FB5CAD54100A974D66BF79ABF7E8C7BE64542D8C268D8C6507DBE397BEF53FF6A3DC59E2A16CCFB908652808B98FA959367839C6282FA95714F9CE33060280C9220902A82AC04484719EA18ED0C7FFD0D97B35416941A0981FC6FAD2EDC7839BF6573DF1C32647C14645CED8C56F863EF9655FD0A76893030E101ACD0E5E89775F8CEC7EC67BA3E383CA74E04A7464208B0036AF3993A630751B626C3CD57336CC8150CA5CB576C6C1556E7538C48B87C79120639C21A96DB6DB26926F759D193BFAE16826CD39E32575D6BA16E75C6C86F9F4BCAB0A4B442637BC9B4C93DB97CE1F1CFCE8E7FD61BF420841048B537457192D0E111108C1C868FAE39F755E282879CA54FACD5B3D473FF4C9592002410216A7E8F21A8C1602088248D211E5E0AF7BCF1E9B2CAE4C157AE8B73D077F3B9C8E332D99B6682026AB201910000401A323E94FFEBFAE4BA7020040080A120A62417F834024200614A45B391A27B3B8CF4C222AAB34E782908C42FE6DF10F46DEF99BF6AE4B71404402063371798D8E52491081105033ECBB0FAE7FF6AFBD5979B21479DF85F10FFFA12734A608222241CE4194D06042E0D0772EFCF96BFD990CBBB11E821676A6FD77E3BD20D1EA9FA32020111038178DE29E571A6A9BCD88204964E042F8DC44D5EA54347DF483E16C860B024A1661CFEFD4D736CEA9DECC7CF65883574303D712DAC4503292CAC69C81353E103DF8DBEB99142304890137EFAFDEFA88D7E132C44299735F0E9FF9D2AFAA98892A5FBFD15FDFEAF4788C00E0EB8D9CFE729C0322E7269761C773D5ABB7B8AD7643603871ECBDC16BE76248504EAAA70F8CACDB56AA4DE5BACEF88E7EE4635AEF46A06D47D99687BD7697940866CE7C31D271364A044C85E443BFED6F6C73D6AE2E79F5DFAF4A44B287DE188C475400B4BAA57DDFAFB3DA24A355B4CD69472816886C92643875E9A89F51200270006F8355CBECADCACA376FF60D76A5049130C6EBD6B9F6BC545BD560A3B2DA7D3670E4DDA1B05F41C4739F8F34AF776FD9590E5A07FCF660244805113907C92CACDD53D6B6C92D89D07F2572F6E0B8BF2F43049C2D229ECFF28B295FF3D438F7BE52FBD6FFD3AD28C06476E2C3A1B68D25655EF3A5C323BD57E244404AF9DA9DDEAD7B2AE638C5B91361710ED994924ECA9A85C8194F2794812BE1C36F0FC6A31409329557AE7234B43AB54F5F3C3C3A3E2C130139E75B9FA97DF60F9A354BC25361AD6E7400E7273EF31301C77AE2ED6702BBF75703C0E8403C9DA2920139E08E176BF7BFDAA0BDF7A555B6923263E07FBDE4F72984607028158DC8168BA86495D35F8CA6124C109131BE764FC5CB7FDC6A9FB0931A57BBDEFCBFAEB49F891102A39DF1EECB912DBBCA37EDB5C40389931F0CC5C288C025ABB87677A567EEBE370455A6C958964C0CB87296068713273FBADE7921AE25643758C5350F9689040160B83372E564840884515ED1EA78E5CF5755D5E4720254D43B1C6EE9ADBFE9CEA4B992A2E70EFAD66EF1188DC2F56BA1BEABB9175590C8BEDF6BDC3731F4AF7EB0A2AEC5FECEDF76A7926C863E69869F6E720F05AC7DA8B2F35CF0F4C1101170BC37FEDD57A3DBF7961EFF6454550191BB2ACDFBBE576F9E73F586DB17160253D997BFEC3EFAA6A0BD0F4CE5E9849A082BAAC2094146B9C12EEE7EA9CEE53200402691ED3A17D13642392ACD3B9EAE29B44F0D6669DBFEEACBC7428938632AEBBD1CD9FE48952462D386B21FFE2F26044091D4B6B80A6D2F67B9ADC46B181F9151003943930905002263C9C18E0421C839B7B80DBB5FA8B31758DF8E52EBF6A7AA4606529421A32C309ACABD216C72E30CE730D742CB5AE925821DC7FC639D91BC25974DD14444C924A956699731BEEE116F6BCE0AE67D974289984A0402226E7BB22AAF2AAD4DDBB657347DE5BBF25D8C1018ED8E8582D9CA2ACBE0B5683A45352D36AC77ED7CA23A6F501242D6EEAEEAB9183EF6C938CE93B3503219F6BCD2D0DF1E0FF81404387760C4DF13F60D6608411070E78BB5F54DB75174ED8E86420EC1A14CDE26CD799C11B5E76A2D353EFC83868D0F966BBF4D8433617F962072CE0D2632742D34DE1B2DAC709C4964450301CE1031703D95CDA8924D72975BDDE5560060946552AA7F24914DA9AACA52492515911351150920606E830D406028998CAB88C8282F6FB455D54EDFFFBE729BF70F6BEC8C2100B3BA4C93A7BF5310211596134139FF57986804E040245CBBB7E2891F34190D0400A8427DFD09CE11388806928A642E7C3BCAA7CC1018905C33A6A28A7F345DE1358E5F4F719E1B70576E29B15AA73C2C220AAD9B4B4E7FE5576F28A8907B59F096BED3E9BFAE6C763FF442F507FFD8CF39C6C7B357C7338848195FF960E9038F56DE96A3EF0E6D2CC94808C95D17553867B9D44D55AB1CCFFED1CAA65667BE8F4944B299140304423038987AE7AF3A00A60EF15C4B610D9C8292A5EA44024839AD749DF75F391E181D4826A3AA9C619C7145668C72CE604AFD6D804434AB2A00081CA0A46A86ACAF069354D578B3DC8AB77E023342449426722A31CA999A4B8063B4898FFFB479DBBE0AB339D7BCAACC6261453B1595D9A1D7066E9434E780020207A672254DA9CA1311596B1FC1404A2A6648155152613699493C36D31CF60E5F19DCF4684DD7B9F0E5EFA284200272C61D5ED323BFD360BBCD0CCD77222C2292BDBF57DFB8D2CE1820F24B8746BF3BE0D7A6F74A9639DDC6C2914B95D964DA7B6D8771EE514CDC3F9F9878A3B6B90E002019497FFECF9D670E05B229A605E66B5D8296FE45B3570BB5A02A2C972604512CCCD4503418E56D3BCB763E55A5EDEF0A0EC50FFC4B7F2AC911409599C12CE65505008CF17C2D4F80DC36EB199E2A00CFA545E69CE5940A004498B9349520925B14A798E3AEDD02CC76D38AF5AEABA7A2B9DF73707ACDDE3957B0CE73274B3A48A0BAC5B57222A99CCB6DE8B910098C2984A0BF2F71F28B91677EBF29EF1736980441449039A3DCBBD2BEF3A92A51C4199B957330D90D168BC8193BF65EFF894FC781102210935D6C5CEB28ABB6986CA2D56100CA8E7F38343A902E4C04AA6DB9D16CA54C426194CF6F9AF519AFD6596E6EDD5CA63D59758D6BA83D7AEA600005A266E8F10FAFB7AE77E797E1898092910007E0209A85875EA9F194996689EB6A6871008264CC65B7A72A4FC567485C286729BDB1B010BFE1703765865F8546E2670F8D330E04817320047D1DD17347C71F7AB2FAB61AF40E87C242AF5F79BD63F323E55FBC3EAC5DE9F9AF7C1B7697D74D783B6C6EA3D92AA4932A70305AC48D7B2B6FB9D01B0B242E1DF36B1D99C92E3EF7676D1BB697E6C39BB229E5CA91D1913E0061B2119D2526C980D92C20627028954EABF6A95D772A96E9BD1AD182323CD5D6EA46C75D9857F946981CD34583B4FDA9EA6B6723891823028E76C4CE1D197BF8853AEDB3924170961A0112DAD71BD67BDAD6DE22791AA3D4E13102C4009029CC3790E4BBA70B61FC7A329DA28838B5C6757EFF3E70CA189D3E5066522A63A8A590987644AAD2631FF45FEF4E1344220221A866B99A6547DF196C5EEDAAAEBB8DD476F3E02045249B1FA9F6D61819E34830EA4B9FF87C246F2A595DE6D20A23631C050C0C26470693D3BE9E4D668F7FDCFFC5EB3D5FBCDE7DF6888F7188F9D3B1B08A0439E39E3AEB9ACD9EC2A0B964381DF1CB38F5C24B6BAC0EB7C4392704FDFDC99EAB916967B976C2F7FA7FBEF2FAFF71F5B5FF74E5D2C9404191AE893FEF3A46A0669567FD8E122D9286ABFCD467C3E313D34F220A55CD36423800C829B5F75278DAD938E3D7BEF37DF17ACF97BFE9F9FADDFE48384B04A1B2D19A1BE9385C3B19088E4F5922CB24B397BE1DBFD1722702110D0438206026AE8E5F9FD2E0D994DC7B3172B3CEB2EBB4EFD4977E40A48CAFDAE3DDF3622522270286069387DF1F946FA784D1FC78DE3DD5F62D8F966B631141B87278ACAF2337481BAD52DB360F215C9B467DFDDB7EFFF864EE7F25AB9EF878E0839F757FFECFBD9FFC536FD7E528220812D19213214222940D8C4D7E3E194D1F7EA7CFEF9309C1423BC5516A6DD9E8D24A7CCB49F5EBDFF40FF6C673BE04CE477BC2473F1C91339CAA20484275F344FC1DE65F5CCCC495F1EB49D086ABD9B9319B08000008A2B0F5891A9747D29228050692A7BEF6E53D18CDEB4B9C1E89718E1C4E7F3672F94C20EFDDE09C0F5CF17FF0F71D9FFDB2F7D39FF71EFF644455390034AC2971B872471BEF891F78BD3718C870CE39F0542CF3CD9B7DD7CEC46EB4260D46D15D66D456D3D42C3DFED1D0C8509231CE394F27B2273EECEF38179DD1068DF9935FFF76309560C0B9BDCCF8D0F3753B9FADAB5D61619423C14B87C62E9F0ACC5D12F3E47947DCB8AFEAFC37FEE1BE0C113019928F7F3254B7C2613410005CF750E5F9C3E3FD1D6941C4AE1381D722D98DBBCB4A2ACDD9A4D27D3678E578885224089632E3C687CA11C0556E29A93046C32941C4E868E69DBF69DFB4CFEB2A352442D92BC7FD3D17A23933BDE0D91251D8BABFAAFD743834AE100147DAA3FFFA9F2FADD9595AEA35857DC9ABC783E3431922205559E3BA92A655B9E9A164142D7691739910C8C6D58F7ED6D1BEDEE92A37EF78A6CE3ACB789D4FC17003552DAE0D0F79BE796F0C0191C3F92F4737EC2AAFADB70180B7D1B5795FE9D76FF99060623CF3EE5FB577EF2DAF6FB10B02FA7A62E70FF9823E451408E57CDD5E6F49A951FBCA9A07DD473F19D7ECC70B07467D3DB186D54E81C048576CF05A42CB0D3EADFB118D52F37AD7A51361002404FBCF857EF5BF5D6858E3341AD1D797186C8F530A844C8F0266949EF868A0EF5A9208C818DFFC78657DB39D10DCF57CF5C87FED56145092EA376F0DD4B5384ACBE6145E366F4B3AAE0ADBB6C72B7CFFD4CF35E7E18940E7C3E1755B3C00E0F4DA9EF871D35B7FDD191C538880C3576323D76282849C72AA8236E4896661CFABF52B56BB00C0EC306D7BBC72B8B757513821387C2D36D2111344A42A57655ED162359B60F05A6ADA32584DAB67FFEFD77FF88F7D892815040C5D4F1DFECD8076704024885465A50DB6FDBFD7949F399BEC86A675CEDEAB494DA9C1C1D4786FA2A4DEBAE991EAD98475F31E8D08C2D6FDD5978F85827E95108C8CA44F7E365CF96F568A021241D8F562D3F850E6F28930222602D9636F5D3F292122A80ACF2DD533BE7267D9AEA76AB4A98F20090FBDDC30DC9BECBF96D4C28446BB12231D09ED0A5020AB777AC67BE241DF74BB7ECDAECAF347023D97E3824810313898F2F7A7B4242492455CF390BBFBBB5026CD7369490000A0EFA2FFC46763C091315EDE6CDBBEBF5A8B325AB5A3A2ED5BFFC5631122E2C8B5E8B14F879FF9FD26610E93EEDB180A39639472CAD84D3CD4B87E4F654DB3459BF9A7A3CAD10F0613C9DC3DB76CAEF8FEFFD0B672A35D108173CE282819AE2AA0F911CA1AADCFFD49CB9E676B27AE18373D56BBFF87B536A7A8D5FD6614940C43820D9BDD2FFEBBD6AA3A0B5519A38C15840603E2A647EBBEF7DFB5D4ADB420E18C71CE9151E01C39E344C2150F785EFD8B55CD05954210C9034FD5AD7BD02D4AC02867DAF8315BA3A1E6A067543BFE0C03A2B7C1B5F9E132E08C510E9C5FFCDAD73B6115384A2D2FFEE9AA5DCF55581D82B6BB4695B992E59C01E36076490FBE5CFBBD3F6D2D29C807595AEB7CF9CF56ADDAEA24025095E77DAA06ABB8E599EAFDBFDF204A4829638CB382CA9E8E32EB737FD4B262BD1D805375327EDA601377BC54BB6D5FB976FDDA2D20622294FAEAF5FE4848E59C13091F7CAEB6BC2217196BB41877BF586B7311AA324EF9A98F873A2ECDA920C85C7337A8B272E1F04824A422221170EDAE8A52AFF9864FF19E0BFEFE8EB8569C4330920D7B2A5D05C140C968BAFB42A8BF3D1A1ACB24638A6424EE72734DAB6BE5A6124FB9056F98A10C7586AF9D09FA47328A4CAD4E43DD6A77DB9652A753EA38333EDC9B4404C140D6EFA99A165C1FF527BB2F04073AE2E1F14C26454D56C1536969585BB2627D896DA6282B6DC2E8BF9E4A44B39481A7C6BAED916AD34D7625F45DF6F75E8D21226750DDE66CDDE0B9518791B1C4C56339B39A71DEB8DED3DCE62A68493AD415EEBA181A1B4CC7C332E7DCEE32781BEDCD1B3D75CD0E69A68458A958A6F36CB0F76A2411513880B3D4B46293A7657D09E1ECECA191444C05006B8971F39ECAC2594E2C98BA7A2A30D81E890465442CA9B2B46C296DDBE84945D217BE1DA31438E3552DCE559B4B43A3898BC7C61903E0DCE4306C78A8B2D0CB4F557AF9982FE0CB202263BC6695BB757DC92DBBAC05480AC21857154A558E042503993D1694734E55C6380802CEFEC91BCEC2549951CAB5BC4573D991A635C5BDD99DC78153856961998244660F1FCDDF11A51CB8E6179D730D58CA34DFAC64286E769D69E8D966748A82BEC55EA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2A00B4BA728E8C2D2290ABAB0748A822E2C9DA2F0FF03680E9D1FD26F61080000002574455874646174653A63726561746500323031392D30372D32365431383A32313A33312B30303A303041DB83D40000002574455874646174653A6D6F6469667900323031392D30372D32365431383A32313A33312B30303A303030863B680000001974455874536F6674776172650041646F626520496D616765526561647971C9653C0000000049454E44AE426082'  
    )  
);  




SELECT *   
FROM OPENROWSET(BULK N'C:\Test\logo.png', SINGLE_BLOB) image;  

Answer 1

For starters, you are populating the src attribute with a base64-encoded string. That attribute must be a URI for a resource that will provide the actual (binary) image data, such as a file, or an endpoint that can provide a binary stream. If you want to read images out of a database, you need to stream the binary data into the body of a HTTP Response, ideally with the appropriate MIME type in the Content-Type header field, and create an endpoint that calls the logic for doing that.

I would suggest that it's almost never a good idea to store images (or most other binary data files) in the database - the file system is better at managing files than your DB logic can ever be. You can store a reference to the file in the database with whatever metadata you need, and then just provide the path or URL to the file as the value of the src attribute.

Answer 2

I don´t agree with the preceding response. You are using a data Url for the "src", which should work as long as you are using a modern browser. If you are attempting to see the page in an older browser, then you would need to provide a URI to a resource like it was mentioned by DonR. But if the browser is reasonably modern (IE will not work as far as I know), it should be all right the way you are doing it.

A previous comment mentions that ExecuteScalar does not work for an image. I'd suggest using a breakpoint in the debugger and checking the returned value to see whether it is working or not. If it isn´t, then you can use ExecuteReader as suggested in the comment.

As to the other observation about not storing images in the database because the file system is better, there is a solution for this: use the FILESTREAM option in the database server. This will cause the images to actually be stored in the filesystem while at the same time they are exposed by the database server as BLOB fields. This gives you the best of both worlds without having to change the code, and with minimal change to the table schema.

Answer 3

Why not store pictures like this in the code?

In this way, the actual data of the image will be stored instead of the path of the image.

                Image image = Image.FromFile(@"D:\test\pictures\react-redux.png");  
                byte[] re = ImageToByteArray(image);  
                using (SqlCommand command = new SqlCommand("insert into ImageTable values(2,@binaryValue)", conn))  
                {  
                    command.Parameters.Add("@binaryValue", SqlDbType.VarBinary, re.Length).Value = re;  
                    command.ExecuteNonQuery();  
                }  

This is another way that uses stream semantics to upload and download pictures.

Download and Upload images from SQL Server via ASP.Net MVC

Although it's a long time ago, it should be able to provide you with some ideas.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.