CODEWITHSUNDEEP
knockout.js
madireddy
madireddy

Reputation: 107

Dynamically binding URL with Image doesn't work as expected

Trying to dynamically bind the URL with a image. 

<a class="dis-block how1-child1 trans-03" data-bind="attr: { href: latest()[1].url, title: latest()[1].title}, text: latest()[1].title">

     <img data-bind="attr:{src: latest()[1].imageData}">

</a>

Actual result : Only tag content is displayed. Image is not getting appended, though imageData exists.

Expected result : Binding for and should work

Upvotes: 0

Views: 99

Answers (1)

Bludev
Bludev

Reputation: 547

It should work. What is the exact content of imageData? A URL or base64?

Edited: The binding text on the anchor tag has the effect of removing all child nodes. If you want to add a text next to the image you could do this:

<a class="dis-block how1-child1 trans-03" data-bind="attr: { href: latest()[1].url, title: latest()[1].title}">
     <img data-bind="attr:{src: latest()[1].imageData}">
     <span data-bind="text: latest()[1].title"></span>
</a>

Make sure the base image starts with 'data:img/png;base64,' prefix, with the right mimetype according with your image type.

Upvotes: 1

Related Questions