How can I do a knockout binding to a backgroundImage URL?

Question

I have an observable array with ``` var items= [ {"image": "/images/image1.jpg" }, {"image": "/images/image2.jpg" }, {"image": "/images/image3.jpg" } ]; ``` My template looks like this: ```

``` Unfortunately, this does not work. What I want is this: ```

``` How can I reach this?

Accepted Answer

You need to concatenate your strings:

```
data-bind="style: { backgroundImage: 'url(\'' + image() + '\')' }"
```

If `image` is actually an observable, you'll need to call it, or you'll end up concatenating the function instead.

Note that since you're binding to an expression involving the property, you must call the function (with `()`). Otherwise, you will end up with a Javascript expression that concatenates the function itself. The only reason you don't need `()` for simple bindings is that Knockout detects when the binding returns a property function and calls it for you.

How can I do a knockout binding to a backgroundImage URL?

Solution

Problem