knockout image src binding issue

Question

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.

Answer 1

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.