Add a user control: ~/Views/Shared/DisplayTemplates/Image.ascx

If the image property is of type EPiServer.Url then this is what you need:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EPiServer.Url>" %>
<%@ Import Namespace="EPiServer.Web.Mvc.Html" %>

<img src="<%: Url.ContentUrl(Model) %>" alt="" />

Or if it's EPiServer.Core.ContentReference:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<EPiServer.Core.ContentReference>" %>
<%@ Import Namespace="EPiServer.Web.Mvc.Html" %>

<img src="<%: Url.ContentUrl(Model) %>" alt="" />

Then in your view just use EPiServer:Property web control:

<EPiServer:Property PropertyName="NameOfImageProperty" runat="server" />

Oh, and you need to decorate your property with a UI hint:

[UIHint(UIHint.Image)]
public virtual ContentReference NameOfImageProperty { get; set; }

<p>yes , i know but i want to code behind &nbsp;code &nbsp;supose &nbsp;we want disply multiple pages data display on single page so i want to code for aspx.cs page</p>

plase tell me guys urgent need

For multiple images use this multiple times:

<EPiServer:Property PropertyName="NameOfImageProperty" runat="server" />

Or explain more detail on what you are trying to do

using System;using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using EPiServer.SpecializedProperties;

using EPiServer.Core;

using EPiServer.DataAbstraction;

using EPiServer.Framework.DataAnnotations;

using EPiServer.Web;

using EPiServer.Web.WebControls;

using EpiserverCMS8.Models.Pages;using EPiServer.ServiceLocation;

using EPiServer.Web.Routing;

using System.Text;using EPiServer.Framework.Web;

namespace EpiserverCMS8

{   

[TemplateDescriptor(Path = "~/Default.aspx")]     

public partial class Default : EPiServer.TemplatePage<DefaultTemplate>   

{
        public string head, head2, Xtml, image; 

      public StringBuilder sb = new StringBuilder();     

         protected override void OnLoad(EventArgs e)     

  {
            head = Convert.ToString(CurrentPage["Heading"]) ?? string.Empty; 

          head2 = Convert.ToString(CurrentPage["ShortDesc"]) ?? string.Empty;   

        image = Convert.ToString(CurrentPage["BannerImage2 "]) ?? string.Empty;   

      sb.Append("<div id=\"id1\"><h1>" + head + "</h1><h2>" + head2 + "</h2>" + Xtml + "  <img src=" + image + " \" alt=\"\" /></div>");
        }

    }

}

Above code imgage property not working 

i can write the code in page type

public virtual string Heading { get; set; }
public virtual string ShortDesc { get; set; }

[Display(Name = "Background Image")]
[UIHint(UIHint.Image)]
public virtual ContentReference BannerImage2 { get; set; }

heading and shortdesc property  are working image property show url reference number like 762 

so can u tell me how can write the code

<p>You can use it like Geta has done in their extension:</p> <p>https://github.com/Geta/EPi.Extensions/blob/master/Geta.EPi.Extensions/ContentReferenceExtensions.cs</p> <p></p> <pre class="brush:csharp;auto-links:false;toolbar:false" contenteditable="false"> /// &lt;summary&gt; /// Returns friendly URL for provided content reference. /// &lt;/summary&gt; /// &lt;param name="contentReference"&gt;Content reference for which to create friendly url.&lt;/param&gt; /// &lt;param name="includeHost"&gt;Mark if include host name in the url.&lt;/param&gt; /// &lt;param name="urlResolver"&gt;Optional UrlResolver instance.&lt;/param&gt; /// &lt;returns&gt;String representation of URL for provided content reference.&lt;/returns&gt; public static string GetFriendlyUrl(this ContentReference contentReference, bool includeHost = false, UrlResolver urlResolver = null) { if (contentReference.IsNullOrEmpty()) return string.Empty; if (urlResolver == null) { urlResolver = ServiceLocator.Current.GetInstance&lt;UrlResolver&gt;(); } var url = urlResolver.GetUrl(contentReference); if (!includeHost) { return url; } return url.GetExternalUrl(); }</pre> <p>So after you have created this extension method you could use it like this:</p> <p><strong>image = CCurrentPage.BannerImage2.GetFriendlyUrl</strong></p>

You can use it like Geta has done in their extension:

https://github.com/Geta/EPi.Extensions/blob/master/Geta.EPi.Extensions/ContentReferenceExtensions.cs

 /// <summary>
        ///     Returns friendly URL for provided content reference.
        /// </summary>
        /// <param name="contentReference">Content reference for which to create friendly url.</param>
        /// <param name="includeHost">Mark if include host name in the url.</param>
        /// <param name="urlResolver">Optional UrlResolver instance.</param>
        /// <returns>String representation of URL for provided content reference.</returns>
        public static string GetFriendlyUrl(this ContentReference contentReference, bool includeHost = false, UrlResolver urlResolver = null)
        {
            if (contentReference.IsNullOrEmpty()) return string.Empty;

            if (urlResolver == null)
            {
                urlResolver = ServiceLocator.Current.GetInstance<UrlResolver>();
            }

            var url = urlResolver.GetUrl(contentReference);

            if (!includeHost)
            {
                return url;
            }

            return url.GetExternalUrl();
        }

So after you have created this extension method you could use it like this:

image = CurrentPage.BannerImage2.GetFriendlyUrl(false,null)

namespace EpiserverCMS8
{
[TemplateDescriptor(Path = "~/Default.aspx")]

public partial class Default : EPiServer.TemplatePage<DefaultTemplate>
{

public string head, head2, Xtml, image;
public StringBuilder sb = new StringBuilder();
public static string GetFriendlyUrl(this ContentReference contentReference, bool includeHost = false, UrlResolver urlResolver = null)
{
if (contentReference.IsNullOrEmpty())
return string.Empty;

if (urlResolver == null)
{
urlResolver = ServiceLocator.Current.GetInstance<UrlResolver>();
}

var url = urlResolver.GetUrl(BanerImage2);

if (!includeHost)
{
return url;
}

return url.GetExternalUrl();
}
protected override void OnLoad(EventArgs e)
{

head = Convert.ToString(CurrentPage["Heading"]) ?? string.Empty;
head2 = Convert.ToString(CurrentPage["ShortDesc"]) ?? string.Empty;
//image = Convert.ToString(CurrentPage["Image"]) ?? string.Empty;
image = CurrentPage.BannerImage2.GetFriendlyUrl(false, null);
sb.Append("<div id=\"id1\"><h1>" + head + "</h1><h2>" + head2 + "</h2>" + Xtml + " <img src=" + image + " \" alt=\"\" /></div>");

}

}
}

 not exist the bold text words will error occurs

Did you create the extension method I gave code for in the example?

brother i want to display image using page type in page template 

so shell u give the code

Brother I have given you all the code you need.

You just need to implement it yourself.

If you do not know how to do it EPiServer are doing courses even in India so tell your company that you wan't to attend one of those.

thanks but your code not working

Have you created this?

/// <summary>
       ///     Returns friendly URL for provided content reference.
       /// </summary>
       /// <param name="contentReference">Content reference for which to create friendly url.</param>
       /// <param name="includeHost">Mark if include host name in the url.</param>
       /// <param name="urlResolver">Optional UrlResolver instance.</param>
       /// <returns>String representation of URL for provided content reference.</returns>
       public static string GetFriendlyUrl(this ContentReference contentReference, bool includeHost = false, UrlResolver urlResolver = null)
       {
           if (contentReference.IsNullOrEmpty()) return string.Empty;
 
           if (urlResolver == null)
           {
               urlResolver = ServiceLocator.Current.GetInstance<UrlResolver>();
           }
 
           var url = urlResolver.GetUrl(contentReference);
 
           if (!includeHost)
           {
               return url;
           }
 
           return url.GetExternalUrl();
       }

The GetFriendlyURL-method relies on other extension-methods as well. Would suggest you to download the whole file/project.

Ahh, that is true Erik, I missed that part, sorry for that!

Surech, do like Erik says and use the whole package, it is great!

thanks henrik and erik

@suresh davala, in case you don't want to download extensions

If you've defined image property like Mattias suggested:

[UIHint(UIHint.Image)]
public virtual ContentReference SampleImage { get; set; }

You can use the following code in backend:

protected override void OnLoad(EventArgs e)
{
    string url = EPiServer.Web.Mvc.Html.UrlExtensions.ContentUrl(null, CurrentPage.SampleImage);
	...
}

But of course, cleaner approach would be to write your own extension or use Geta's extensions as Erik and Henrik have suggested.

<p>thanq very much dejan&nbsp;</p>