Question

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

有没有办法可以做类似的事情：

self.Image = ko.observable（）;

然后将我的WebApi调用中的图像加载到self.Image中（不确定返回类型是什么）。

然后呢？

Answer 1

实际上非常简单。您可以使用attr绑定绑定任何html属性。这是使用按钮执行任何操作（包含ajax）来加载图像的示例。请注意，我不确定您的图片是什么样的，但您当然可以使用数据网址绑定为src。

＆＃13;

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())

＆＃13;

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

＆＃13;

Answer 2

我解决了这个问题：

[Route("Preview"), HttpPost]
        public string Preview(PlateTemplateExtendedDto data)
        {
            var img = new PlateService().CreateTemplate(true);
            using (var ms = new MemoryStream())
            {
                img.Save(ms, ImageFormat.Jpeg);
                var base64 = "data:image/jpeg;base64," + Convert.ToBase64String(ms.ToArray());
                return base64;
            }
        }

然后在视图中，我只使用该文本作为源。

<img data-bind="attr:{src: image}" class="img-responsive" style="margin: 0 auto;" />

从WebAPI调用显示图像

2 个答案: