使用knockout，如何将图像src绑定到异步方法？答案

【问题标题】：With knockout, how to bind an image src to an asyncronous method?使用knockout，如何将图像src绑定到异步方法？
【发布时间】：2019-07-09 19:33:55
【问题描述】：

目前我有一个带有 ko 的 foreach 绑定，里面有一个 img 标签。我想从授权的 web api 2 服务中获取此图像作为 src 数据字符串。

这些图像很重，所以我不想将它们作为模型的 src 数据加载。我也不想直接链接到它们，因为我希望图像的“获取”是授权请求。

<div class="owl-carousel owl-theme" data-bind="foreach: loadedScreen().Screen_Mockup">
    <img class="owl-carousel-img-util" data-bind="attr: { src: getMockupImageById(screen_mockup_id()) }">
</div>

这有点工作，但前提是不涉及 ajax。如果我的 getMockupImageById() 方法只返回一个字符串，则它已正确填充。

但是，如果我尝试发出 ajax 请求并从成功回调中返回它，则不是。我的网络服务返回这种字符串：“data:image/png;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlu...”

【问题讨论】：

标签： javascript .net knockout.js asp.net-web-api2

【解决方案1】：

Knockout 是围绕使用可观察属性来告诉它需要对哪些更改做出反应的概念构建的。如果您将 DOM 绑定到普通函数，则不会告诉 knockout 更新 UI。您应该将图像源声明为模型上的可观察属性，然后在 ajax 返回时更新该可观察属性。

这是伪代码，但它可能看起来像：

<div class="owl-carousel owl-theme" data-bind="foreach: loadedScreen().Screen_Mockup">
    <img class="owl-carousel-img-util" data-bind="attr: { src: mySource }">
</div>

...

mySource = ko.observable();

getMockupImageById(screen_mockup_id()).done(function(result){
    mySource(result);
})

【讨论】：