c# - 显示来自 WebAPI 调用的图像

Question

我已经在我的 .Net 后端服务中生成了一个图像，并且正在使用一个 System.Drawing.Image 对象。我调用了我的 WebAPI 方法，渲染了图像，并希望将图像返回到前端并显示它。

有没有办法让我做类似的事情:

self.Image = ko.observable();

然后从我的 WebApi 调用加载图像到 self.Image(不确定返回类型是什么)。

然后呢？

Answer 1

其实很简单。您可以使用 attr 绑定(bind)来绑定(bind)任何 html 属性。这是一个使用按钮做任何你想做的事情(包括 ajax)来加载图像的示例。旁注，我不太确定您返回的图像是什么，但您当然可以使用数据 URL 绑定(bind)为 src。

function viewModel() {
  var self = this;
  self.Image = ko.observable();

  self.LoadImage = function() {
    // Ajax stuff
    self.Image("http://lorempizza.com/200/200");
  }

}
ko.applyBindings(new viewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<img data-bind="attr: {src: Image} ">

<button data-bind="click: LoadImage">Load Image </button>