无法通过异步 ajax 调用渲染 base64 图像返回答案

【问题标题】：Failing to render base64 image return by async ajax call无法通过异步 ajax 调用渲染 base64 图像返回
【发布时间】：2015-10-15 14:38:42
【问题描述】：

我尝试进行多个异步 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());

&lt;img data-bind="attr: { src: Image }" alt="ProfileImage" /&gt;

【问题讨论】：

能不能把返回的字符串放到浏览器地址栏，成功获取图片。 base64 字符串本身可能有问题。代码看起来正确

标签： javascript jquery ajax asynchronous knockout.js

【解决方案1】：

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

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

【讨论】：