To display binary images in the dxGallery widget or a dxList item template, encode your image byte array in base64 and use the Data URI scheme. In this case, all the processing will be done on the client side and your image elements inside the dxList template will look as follows:
[HTML]<imgdata-bind="attr: { src: 'data:image/png;base64,' + your_image_bytes_in_base_64}"/>
You can use the following tools to convert any image into a base64 string:
DevExpress - How to convert a binary image to a base64 string
Motobit
DataURL
Question Comments
Added By: albert chang 1 at: 11/13/2014 1:32:40 AM
<img id="imgID" data-bind="attr: { src: 'data:image/png;base64,' + getpicture(id) }"
getpicture= function(id){
var no_seq1 = id;
$.ajax({
url: 'http://localhost:48785/WebService1.asmx/PublishImage';,
data: '{id: ' + JSON.stringify(no_seq1) + ' }',
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST",
async: false,
error: function (xml, status) {
return status;
},
success: function (result) {
var img = result.d;
}
}
Q:
1. how to return base64 string (img) to dxList image control
2. jQuery("#imgID").attr("src", img); --> only display last one record
thanks
Added By: Nikolai (DevExpress Support) at: 11/13/2014 7:32:22 AMHello Albert,
To process your recent post more efficiently, I created a separate ticket on your behalf: T173067: How to display binary images (data URIs) in the dxGallery widget or a dxList template. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.