javascript - knockoutjs 根据某个值有条件地设置图像 src

Question

我想以某种方式根据我从 js 获取的名称值动态设置图像源。

我尝试了类似的方法，它可以设置特定 div 的 css 类以使其与图像一起使用，但它不起作用。我想要实现的是 src 根据名称值动态更改

<img data-bind="attr:{src: 'image1.jpg' : Name == 'Package 1', src: 'image2.jpg' : Name == 'Package 2'}" />

作为引用，这就是 css 样式的工作原理:

<div data-bind="css: { package1_css: Name == 'Package 1', package2_css: Name == 'Package 2'" />

Answer 1

为此使用计算的可观察量。

self.ImageSource = ko.computed(function(){
    var url1 = "https://placeholdit.imgix.net/~text?txtsize=12&txt=101&50&w=50&h=50";
    var url2 = "https://placeholdit.imgix.net/~text?txtsize=12&txt=102&50&w=50&h=50";

    switch(self.Name()){
        case "Package 1":
            return url1;
        case "Package 2":
            return url2;
            break;
    }

}, self);

此外，使用 attr 绑定(bind)绑定(bind)到图像标签:

<img data-bind="attr: {src: ImageSource()}" />