question

kelvinnyota-1027 avatar image
0 Votes"
kelvinnyota-1027 asked AgaveJoe commented

Display binary byte[] array instead of base64

Am trying to display byte[] array images in asp mvc c#. But there is only base64 conversion option available. I have learnt ASP MVC 5 since 2019, now am experienced and don't want to waste CPU resources on image conversation. I am displaying an image list on my view, but don't want to convert them into base64. SQL Server does not support saving in that format. So, here is my implementation, but it is filling the whole page to load one image, and not loading all the other images.

Here is the code:

 Public stream GetBinaryImage(byte[] buffer, string ContentType)
 {
    
     Httpcontext.Current.Response.ContentType = ContentType;
    
     Httpcontext.Current.Response.BinaryWrite(buffer);
    
     return Httpcontext.Current.Response.OutputStream;
 }
dotnet-aspnet-mvc
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AgaveJoe avatar image
0 Votes"
AgaveJoe answered AgaveJoe edited

I assume the image in a byte[] array already. The rest is simple, return a FileResult from your MVC action and take advantage of the Controller.File() method as illustrated below

     public class FileController : Controller
     {
    
         public ActionResult Index()
         {
             return View();
         }
    
         // GET: GetTele
         public FileResult GetTele()
         {
             byte[] fileBuffer = System.IO.File.ReadAllBytes(Server.MapPath("~/images/tele.jpg"));
             return File(fileBuffer, "image/jpg");
         }
     }


The Index view that displays the image.

 @{
     ViewBag.Title = "Index";
 }
    
 <h2>Index</h2>
    
 <div>
     <img src="/File/GetTele" alt="Telecaster" />
 </div>


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Bruce-SqlWork avatar image
0 Votes"
Bruce-SqlWork answered AgaveJoe commented

you are facing a browser limitation.

each request can return one html page or one image. dataurls allow including the small image data (as it doubles the download size) in the html. I assume this is what you are using. dataurl used for images only support base64.


· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.



Bruce-SqlWork


So what do you do to avoid this limitation?

0 Votes 0 ·
AgaveJoe avatar image AgaveJoe kelvinnyota-1027 ·

So what do you do to avoid this limitation?

For the third time, the sample code pattern I provided avoids this limitation. The img element causes the browser to make a HTTP request which fetches the image from the action.


 <img src="/File/GetTele" alt="Telecaster" />


This is very similar to referencing an relative image path, accept you get to control the URL and can return an image by Id or name or whatever design you come up with.

If you are still having problems, share sample code and the steps to reproduce the issue.

0 Votes 0 ·
YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered

Hi @kelvinnyota-1027 ,
As far as I think,you could return byteArray in your controller.Just like this:

 return new FileContentResult(byteArray, "image/jpeg");

More details,you could refer to below article:
https://forums.asp.net/t/1937602.aspx?Display+Image+from+byte+received+from+DB

Best regards,
Yijing Sun


If the answer 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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

kelvinnyota-1027 avatar image
0 Votes"
kelvinnyota-1027 answered AgaveJoe commented


Bruce-SqlWork


True


Yijing Sun

I have tried to return a FileContentResult before but it refused to work.


AgaveJoe

Ok. I understand. I have used FileResult in the following scenario, but it is not sending any data to the FileResult method.


Only int parameters and strings but objects are not supported.


· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

The example I provided above works as expected and returns a file stream.

You did not share code that reproduces this new issue therefore the community cannot provide feedback.

0 Votes 0 ·


AgaveJoe


It does not work on Form Submit method when I try to post back the binary image that I received from my view. E.g. I have an ListImage class that is populating on my view.

 Public Class ListImage {
    
     Public int UserID { get; set; }
    
     Public string Description { get; set; }
    
     Public byte[] ImageData { get; set; }
    
     Public string ImageFormat { get; set; }
    
 }

0 Votes 0 ·


Now, am very aware that you cannot display binary on the view. The trick am trying to make is to post back ImageData and ImageFormat properties back to ProductController on GetImage method below:


 Public class ProductController {
    

     [Http.Post]
     Public FileResult GetImage(byte[] ImageData, string ImageFormat)
     {
    
              If (ImageData.Length <=0 || string.IsNullOrWhiteSpace(ImageFormat))
                  return view("ProductList", null);
              else 
                    return File(ImageData, ImageFormat);
    
      }
    
    
 }

I don't have Internet on my desktop. I typed this untested code on my phone.

0 Votes 0 ·
Show more comments