knockoutjs условно установленное изображение src в зависимости от значения

Question

Я хочу как-то установить источник изображения динамически на основе значения имени, которое я получаю от js.

Я пробовал что-то вроде этого, которое работает для установки класса css определенного div, чтобы заставить его работать с изображением, но его не работает. То, что я хочу, чтобы достичь является ЦСИ динамически изменяться в зависимости от значения имени

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