CODEWITHSUNDEEP
c#jqueryasp.net-mvc-4
Jiju John
Jiju John

Reputation: 821

set image source with base64 in jquery

In my web application, I am storing image as a byte array in database, in a page, I want to show image in dropdown using autocomplete

I am using below jquery code 

$(function() {
    $('#userName').autocomplete({
        source: function(request, response) {
            $.getJSON("/Users/getData?term=" + request.term, function(data) {
                response(data);
            });
        },
        select: function(event, ui) {
            $("#userName").val(ui.item.label);
            return false;
        },

        minLength: 2,
        delay: 100
    }).data("ui-autocomplete")._renderItem = function(ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.value + item.Image + " - " + item.label + "</a>")
            .appendTo(ul);
    };
});

here item.Image is a bytearray, how to show the image here,

thanks

Upvotes: 0

Views: 3163

Answers (1)

Emmanuel Gleizer
Emmanuel Gleizer

Reputation: 2018

a standard base64 encoded image is:

 <img src='data:image/jpeg;base64, LzlqLzRBQ...<!-- base64 data -->' />

so update your code:

.append("<a>" + item.value + "<img src='data:image/jpeg;base64, "+ item.Image + "' /> - " + item.label + "</a>")

[EDIT] Your code in getData has to make (server side) the conversion, the result of item.Image should be base64:

Convert.ToBase64String(imagebytearray)

Upvotes: 1

Related Questions