Knockout template using data-bind to image src property not working

Question

I cannot see what is wrong here but the image does not display using the following Knockout template:

<script type="text/html" id="legend-template">       
    <div><input type="checkbox" data-bind="click : doSomething" ></input>
        <img width="16px" height="16px" data-bind="src: 'imagePath'" />          
        <span data-bind="text : label"> </span>
    </div>        
</script>

The object this is being bound to looks like this:

tut.myObject= function (imagePath, label) {
    this.label = ko.observable(label);
    this.imagePath = ko.observable(imagePath || liveString + '/Content/images/marker.png');   
};

tut.myObject.prototype = {
    doSomething: function () { alert("do what?");
     }
};

When the HTML object is rendered I see the label and clicking on the checkbox invokes doSomething.

TIA.

web_bod · Accepted Answer · 2012-05-26T14:02:19.887

182

Only a few attributes can be bound directly; try using attr - it will let you set any attribute on an element.

<img width="16px" height="16px" data-bind="attr:{src: imagePath}" />

edited May 26 '12 at 14:02

answered May 18 '12 at 21:01

web_bod

5,728
1
17
25

Thanks for response BUT when this gives me the following error: Microsoft JScript runtime error: Unable to parse bindings. Message: SyntaxError: Expected ':'; Bindings value: attr {src: imagePath} – Klaus Nji May 25 '12 at 21:35
Got it, thanks. Should be – Klaus Nji May 26 '12 at 02:17
28

sorry about that - #note to self: don't answer questions watching "Die Hard 3" again ;) – web_bod May 26 '12 at 14:03
2

fyi: image tag width and height attributes shouldnt have "px" – chris Jun 25 '15 at 20:17
This is quite an old answer - BEWARE - the framework may have changed – web_bod Jun 26 '15 at 00:57
2

I am using the latest version 3.4.0 and this answer still works just fine. – Geek Stocks Sep 06 '16 at 04:14

Knockout template using data-bind to image src property not working

1 Answers1

Linked