Knockout js将base64图像绑定到图像标签

Question

我正在尝试使用knockout js将图像绑定到HTML图像标签，它不起作用，我在数据库中有base64字符串，我正在从数据库中获取它，但它对我不起作用，下面是我的代码

  //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

最好使用计算函数并绑定单个 ImageSrcName。这可能有助于更好地调试。

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>