Binding image source from a directory in knockoutjs

Question

<ul style="list-style:none;" data-bind="foreach: Images">
    <li style="display:inline;">
        <a class="inline" data-bind="attr: { href: $data }"><img data-bind="attr:{ src:  $data }" width="150" height="150" style="padding:5px;" /></a>
    </li>
</ul>

Why the code above isn't working at all? I mean it's not displaying any images from the path given.

$data = "C:\\Users\\lenovo\\Desktop\\meal_service\\images\\img7.jpg"

do you know what was happening here? Thanks.

it should work check here http://jsfiddle.net/supercool/LkqTU/26845/ — super cool, Sep 23 '15 at 04:54
This type of problem is easiest to debug yourself. Get to know your developer toolbar. Inspect the img rendered by Knockout, check the actual `src` attribute it got, and check the "network" tab of your dev tools to see the request go out / not go out. More then likely your answer is there. — Jeroen, Sep 23 '15 at 05:12

score 1 · Answer 1 · edited May 23 '17 at 10:27

You should not bind the Directory path to the image source in web page. Since, if you give the Directory path directly to the image src it will refer the local system path. It won't load the image from server. Its wrong approach.

The Q and A available.

For Example:

Images.push('../Download/Images/' + image.name);

If you use chrome you can right click on the image and Try to open image in New Tab and check the image url / edit and try the correct path.

Something Like this.,

You have to load the image src as your domain path with image path.

Binding image source from a directory in knockoutjs

1 Answers1