Trying to build a Razor Function that will allow the user to select an image and it will be become the background-image url of a div tag. However, when the page renders I'm not getting what I expected.
Thank you
@inherits RazorFunction
@functions {
public override string FunctionDescription
{
get { return "Testing Images"; }
}
[FunctionParameter(Label = "Background Image", Help = "Image to use for the background")]
public DataReference<IImageFile> Image { get; set; }
}
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://www.composite.net/ns/function/1.0">
<head>
</head>
<body>
<div style="background-image: url(/media(@Image));"></div>
<img src="/media(@Image)" style="float:right" />
</body>
</html><div style="background-image: url(/media(MediaArchive:aec60a01-84b5-4699-9a37-47730b911d81));"></div>
<img src="/media/aec60a01-84b5-4699-9a37-47730b911d81/bX4oNw/Testing/FooBar.png" style="float:right"><div style="background-image: url(@Html.C1().MediaUrl(@Image));"></div>
<img src="@Html.C1().MediaUrl(@Image)" />
<div>@Html.C1().MediaUrl(@Image).ToHtmlString()</div>
Thank you