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

为此使用计算的 observable。

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()}" />