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绑定绑定到图像标签：

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