How do I display a picture from a property on my Umbraco Page?

Question

I have a group of pages on Umbraco which have MediaPickers on them, these pictures will be displayed on the index page as links so that clients can go to a specific page for their product when clicking on them.

I have managed to load the links however, with the below code I can't display the appropriate picture because the following code throws a null reference exception

`var media=Umbraco.TypedMedia(subitem.Properties.Where(x=>x.PropertyTypeAlias=="picture")).SingleOrDefault().Url;`

can anyone help with this? full code is below

 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{

    Layout = "_SiteMaster.cshtml";



    var nodes = umbraco.uQuery.GetNodesByType("productType");

    var ProdPage = Umbraco.TypedContent(1087);




}

<header>
    <div class = "container-fluid">
        <div class="row">
              <div class="col-md-12">
                  <h1 class="text-center">Please Select your Product</h1>
                  </div>
            </div>
            <br />            
             <div class="row">

            <div class="col-md-3">  
                </div>

                 @*<img src="@Umbraco.Media(item.Id)" class="img-responsive" alt="college">*@

                @foreach (var subitem in ProdPage.Children)
                {
                    var media = Umbraco.TypedMedia(subitem.Properties.Where(x=>x.PropertyTypeAlias=="picture")).SingleOrDefault().Url;

                    <div class="col-md-3">
                    <a href="@Umbraco.NiceUrl(1087)?PageID=@subitem.Name"><img src=@media alt="Image" /></a>
                    </div>
                }


                    @*<a href=@SearchURL?PageID=College><img src="/media/1001/college.png" class="img-responsive" alt="college"></a>
                        </div>
                         <div class="col-md-3">
                          <a href=@SearchURL?PageID=Core><img src="/media/1002/Core.png" class="img-responsive" alt="core"> </a>
                        </div>
                         <div class="col-md-3">
                         <a href=@SearchURL?PageID=Salon><img src="/media/1003/Salon.png" class="img-responsive" alt="salon"> </a>*@
                </div>
            </div>
         </div>
    </header>

Answer 1

Have you looked at this solution? As far as I know, the following solution should work. Display Image from Media Library in Umbraco 7

And also I have just looked at one of my Umbraco projects, below is how I get the umbraco image- mind this is Umbraco webforms and it is the code behind;

 var footer = Umbraco.TypedContent(NodeHelper.Settings.Footer).AsStronglyTyped<DocumentTypes.Repository.Footer>();

 if (footer.PoweredByImageId.HasValue)
                {
                    this.imgPoweredBy.ImageUrl = MediaHelper.GetMediaUrlById(footer.PoweredByImageId.Value);
                    if (footer.PoweredByLink != null)
                    {
                        this.hplPoweredBy.NavigateUrl = footer.PoweredByLink.Url;
                    }
                }

And the MediaHelper in case you need, hope it helps;

/// <summary>
    /// Provides utility methods for manipulations with media files.
    /// </summary>
    public static class MediaHelper
    {
        /// <summary>
        /// Gets the media URL by id.
        /// </summary>
        /// <param name="mediaId">The media id.</param>
        /// <returns>Returns image url.</returns>
        public static string GetMediaUrlById(int mediaId)
        {
            string retVal = String.Empty;
            try
            {
                XPathNodeIterator xpathNodeIterator = umbraco.library.GetMedia(mediaId, false);
                if (xpathNodeIterator != null && mediaId != 0)
                {
                    xpathNodeIterator.MoveNext();
                    var selectSingleNode = xpathNodeIterator.Current.SelectSingleNode("umbracoFile");
                    if (selectSingleNode != null)
                        retVal = selectSingleNode.Value;
                }
            }
            catch
            {
            }

            return retVal;
        }

// Some more methods..

}