In Razor, how do I show in image if the URL is already in a property of my model?

Question

I have a class which has a property called PictureURL. It contains an absolute URL to the picture which should represent it as a string.

public class MyClass
{
    public string PictureURL {get;set;} 
    public string Name {get; set;}
} 

I want to display it in a partial view.

@model MyClass
<div> 
    <img src="@Model.PictureUrl" />
    @Model.Name
</div> 

The problem is that MVC encodes the property for the display. So my URL which contained an ampersand gets mangled. An example gravatar identicon would become http://www.gravatar.com/avatar/0d958098841b2060bf685088b33e6662?d=identicon&s=256. Of course, the browser renders nothing with this broken img tag.

As far as I know, there is no HTML helper which builds <img> tags. And when I search for displaying images in Razor, the results I get are about properly resolving relative URLs.

What would be a good way to build the img tag properly? (I own the code of MyClass and can change its property type from string to something else, if this would help).

Answer 1

@Html.Raw(Model.PictureUrl) should solve this.