knockoutjs image src not getting updated from ko.observable
<p>I have this code: </p>

<pre><code>  &lt;tr data-bind="foreach: ProductEffectImagesToMatch()"&gt;
                            &lt;td&gt;
                                &lt;span&gt;
                                    &lt;img data-bind="attr: { src: PoseId() ? ImageSrc() : '../images/style2/pose-select-placeholder.png' }, click: $root.PasteSpring"
                                        width="120" /&gt;
                                &lt;/span&gt;
                            &lt;/td&gt;
                        &lt;/tr&gt;
</code></pre>

<p>I'm setting the ImageSrc in the code, but I'm not sure if I need to call something additionally to apply the bindings because although the value is set, I can see that in console.log the image url is not getting updated.</p>

<p>This is the viewmodel:</p>

<pre><code>function EffectSelectionRootModel(imagesrc, poseid) {
        var self = this;
        self.ImageSrc = ko.observable();;
        self.PoseId = ko.observable();

        if (imagesrc) {
            self.ImageSrc(imagesrc);
        }

        if (poseid) {
            self.PoseId(poseid);
        }
    }
</code></pre>

<p>And this is how the values are set:</p>

<pre><code>var itemToEdit = ko.utils.arrayFirst(self.ProductEffectImagesToMatch(), function (item) {
                return item;
            });

            if (itemToEdit) {
                itemToEdit.ImageSrc = self.selectedPose().ImageUrl;
                itemToEdit.PoseId = self.selectedPose().Id;
            }
</code></pre>

<p>And the viewmodel after the execution of that code:</p>

<p><a href="https://i.stack.imgur.com/KpXEj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KpXEj.png" alt="enter image description here"></a></p>

<p>But the image is not updated on the page.</p>

<p>Any idea what else I need to do? </p>