Cannot bind variable to Url in Image

How-to Discussions
1

I have this code. The second image shows just fine, but the first one - which is bound to a variable, does not show. What am I doing wrong?

<App>
    <StackPanel>

        <HttpImageSource ux:Key="picture" Url="{image}" />
        <Image Source="{DataToResource picture}" StretchMode="UniformToFill" Margin="0" Dock="Fill" Background="Green" Height="100" Width="200"/>
        <Image Url="https://lh5.googleusercontent.com/-QZrPA1Hx5is/Vcskihu06NI/AAAAAAAAABI/EP4qS818jwY6D_KWu25pN6c-v1ogDDg8QCJkC/s1600-h500/" StretchMode="UniformToFill" Margin="0" Dock="Fill" Background="Green" Height="100" Width="200"/>

        <JavaScript>
            var Observable = require("FuseJS/Observable");
            image = new Observable('https://lh5.googleusercontent.com/-QZrPA1Hx5is/Vcskihu06NI/AAAAAAAAABI/EP4qS818jwY6D_KWu25pN6c-v1ogDDg8QCJkC/s1600-h500/');

            module.exports = {
                image: image
            }
        </JavaScript>

    </StackPanel>

</App>
2

You should be able to bind to Url directly:

<Image Url="{image}" StretchMode="UniformToFill" Margin="0" Dock="Fill" Background="Green" Height="100" Width="200"/>