javascript - 无法通过异步 ajax 调用呈现 base64 图像返回

Question

我尝试进行多个异步 ajax 调用，其中之一是从服务器请求 base 64 图像。如果我将 base64 图像的 ajax 请求设置为同步，它适用于 IE、Chrome 和 Firefox。但是，对于异步的情况，图片在IE中是每次都渲染，而在Chrome和Firefox中是偶尔渲染一次。有时它被渲染，有时它不是。最重要的是，移动浏览器根本不会渲染图像。

代码很简单，但我不知道它有什么问题。

function TestViewModel() {
  var self = this;
  
  self.Image = ko.observable();
 
  
  self.GetProfileData = function () {
    $.ajax({
     async: true,
     type: 'GET',
     url: ..,
     success: {
        // return profile data
     }  
    });
  }
  
  self.GetProfileImage = function() {
    $.ajax({
       async: true, 
       type: 'GET',
       url: ..,
       success(data): {
        self.Image(data.Base64Image);
       }
    });
   }
  
  self.GetProfileData();
  self.GetProfileImage();
}

ko.applyBindings(new TestViewModel());

<img data-bind="attr: { src: Image }" alt="ProfileImage" />

Answer 1

我猜你应该使用内容类型前缀:

self.Image("data:image/x;base64," + data.Base64Image);