CODEWITHSUNDEEP
asp.net-mvcoracle-databaseblob
Zain
Zain

Reputation: 123

Convert a Database retrieved byte array to an image in Razor View MVC

image with 

src="data:image;base64,YmxvYjpodHRwJTNBLy9sb2NhbGhvc3QlM0ExNDE0MS8wMzI1ZTA3Mi1iOTA5LTQ0YjItOTVlNS1iYzc4ZmJhZTZhMzI=" attribute value isn't displayed
with database table that has just one record with id=1

Razor 

<img id="BlobPic" src="data:image;base64,@System.Convert.ToBase64String(Model.Logoo)" style="max-width:90%;" />

Action method

public FileContentResult getImg(int id)
        {
            BladiaInfoViewModel Bladia_Logo = rep.getByID(Convert.ToDecimal(1));
            byte[] byteArray = Bladia_Logo.Logoo;
            return new FileContentResult(Bladia_Logo.Logoo, "image/jpeg");
        }

Jquery

  $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("getImg")',
                data: { 'id': "1" },
                type: "POST",
                cache: false,
                success: function (data) {
                    //document.getElementById("BlobPic").src = "data:image/png;base64," + data.Logoo;
                    document.getElementById("Logo").setAttribute("src",'@Url.Action("getImg", "BaldiaInfo",
                    new { id = Model.Logoo})');

                },
                error: function () {
                    alert("try again");
                }
            });
            //----
        });

Upvotes: 0

Views: 1269

Answers (1)

David
David

Reputation: 218857

If you're returning a FileContentResult then it looks like you're really overcomplicating this. Presumably you have a page in which the model which populates that page includes an identifier used by this action, right?:

public FileContentResult getImg(int id)

If so then you don't need all of this AJAX or Base64-encoding data URIs or anything like that. All you need to do is reference the URL with the ID. Something like this:

<img src="@Url.Action("getImg", "BaldiaInfo",
                new { id = Model.Logoo})" />

This would create the URL for that action:

<img src="/BaldiaInfo/getImg/123" />

And since that action returns an image file, the browser would get exactly what it expects in that img src, an image.

Conversely, if your model for the page's view doesn't contain an ID but instead contains the actual image data then you don't need a separate action for getting the image at all. Because you already have it. In that case you can use a Base64-encoded URI directly in the model:

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

No JavaScript, no separate action with a FileContentResult, none of that.

Basically, you either have an ID which you use to reference the other action or you have the data which you use to build a data URI. It seems like you're trying to do both at the same time.

Upvotes: 1

Related Questions