How to bind base64 image from database into multi-channel apps?

Question

I have base64 string image in my database table. I want to load the image from database into my multi-channel app. How do i bind them, direct call the string from database? Thanks a lot.

For now i have this code.

HTML

<div data-options="dxView : { name: 'tb_proj_gallery', title: 'tb_proj_gallery', targetFrame: 'navigation' } " >
    <div data-options="dxContent : { targetPlaceholder: 'content' } " >
    <div class="gallery" data-bind="dxGallery: { width: '100%', height: '100%', dataSource: dataSource, showNavButtons: true }">
        <div data-options="dxTemplate : { name: 'item' } " >
            <div class="gallery-item">
                <img data-bind="attr: { src: 'data:image/jpeg;base64,' + file_name }" />
            </div>
        </div>
    </div>
</div>

JS

KioskAppV2.tb_proj_gallery = function(params) {
"use strict";

var shouldReload = false,
    dataSource;

function handletb_proj_galleryModification() {
    shouldReload = true;
}

function handleViewShown() {
    if(shouldReload) {
        shouldReload = false;
        dataSource.load();
    }
}

dataSource = new DevExpress.data.DataSource({
    store: KioskAppV2.db.tb_proj_gallery,
    map: function(item) {
        return new KioskAppV2.tb_proj_galleryViewModel(item);
    }
});

return {
    dataSource: dataSource,
    viewShown: handleViewShown
};

};

The file_name is the column name in tb_proj_gallery table where the image base64 string is save. This code return gallery view with same number of image in the table but the image didnt appear. Its broken. How to make it appear? TQ.

score 3 · Answer 1 · answered Mar 21 '14 at 09:42

3

use attr binding to bind base64 string image.

<img  data-bind="attr:{src: image}"/>//image is observable containing base64 string

Viewmodel:-

var base64string = "//your base64 string";

var Vm = {
   image: ko.observable(base64string)
};
ko.applyBindings(Vm);

Fiddle Demo

answered Mar 21 '14 at 09:42

Akhlesh

2,389
1
16
23

even if you store base64 string in database you have to bind string in same way – Akhlesh Mar 24 '14 at 01:34
Sorry. i have edit my question, i provide my code. Where to add the ko.observable? – Faten Azmira Mar 24 '14 at 01:45
data-bind="attr: { src: 'data:image/jpeg;base64,' + file_name() }" try this. – Akhlesh Mar 24 '14 at 04:37
have you tried out with same string without database call? can you post that string? – Akhlesh Mar 24 '14 at 05:03
Thank you so much..the image string have wrongly save by me...now the image appear...tq so much... – Faten Azmira Mar 24 '14 at 06:48

How to bind base64 image from database into multi-channel apps?

1 Answers1