Knockout js binding base64 image to image tag

Question

i am trying to bind image to HTML image tag using knockout js,its not working,i have base64 string in database and i am fetching it from database but its not working for me below is my code

  //viewModel//

function ViewModel(data) {  
self = this; 
self.ImageBase64 = ko.observable(data.ImageBase64);
self.ImageType = ko.observable(data.ImageType);  
}


        //HTML//
<div data-bind="foreach:UsersImage">
<img data-bind="attr:{src: 'data:'+ImageType+'base64,'+ImageBase64}"/>
</div>

Answer 1

It's better to use a computed function and bind a single ImageSrcName.It might help to better debugging.

function ViewModel(data) {  
  self = this; 
  self.ImageBase64 = ko.observable(data.ImageBase64);
  self.ImageType = ko.observable(data.ImageType);  
  self.ImageSrcName= ko.computed(function () {
     return self.ImageType() + 'base64' + self.ImageBase64();
  });
  console.log(self.ImageSrcName());
}

HTML:

<div data-bind="foreach:UsersImage">
  <img data-bind="attr:{src:ImageSrcName "/>
</div>