CODEWITHSUNDEEP
knockout.js
Ronjon
Ronjon

Reputation: 1849

knockout image src binding issue

I have save store image name in database and image file in local folder I have used to bind the image 

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

in html it's show 

<img src="http://sitename.com/Controller/action/imagename.extension"/>

but I need 

<img src="http://sitename.com/imagefolder/imagename.extension"/>

any idea how can i fix this?? Thanks in advance.

Upvotes: 14

Views: 20640

Answers (1)

nemesv
nemesv

Reputation: 139758

Your issue has nothing to with kncokout.js. If your PhotoName only contains the imagename.extension you need to build your image path by hand in order to display the images correctly.

So you need to create the correct path either in the binding directly:

<img data-bind="attr:{ src: '/imagefolder/' + PhotoName }" />

Note if your PhotoName is a ko.observable then you need to write src: '/imagefolder/' + PhotoName().

Or move this logic inside your viewmodel e.g. creating a computed property which does the link building or when you create your viewmodel assign the correct url to PhotoName etc.

Upvotes: 27

Related Questions