Display Image from Media Library in Umbraco 7

Question

This should be something embarrassingly simple, but I can't get it to work: I'd simply like to display an image that was uploaded to the Umbraco Media Library (Umbraco 7.1.1) within a Partial View template. The code is

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{   
    var imgNode = CurrentPage.BannerBackgroundImage;
    var imgUrl = umbraco.library.NiceUrl(imgNode);
    <div id="banner-wrapper" style="background: url('@imgUrl') center center no-repeat;">
        <!-- some irrelevant content -->
    </div>
}

where BannerBackgroundImage is a custom property of the page. When this is displayed, however, the @imgUrl gets replaced with #.

Other alternatives that I've tried are multiple Media Picker images, how to display a Media Picker image, get image from media with Razor, and display image from Media Picker, to name but a few.

I'd really appreciate if somebody could help me with what I believe is a rookie question!

Answer 1

I found this way easy and clean:

@if (CurrentPage.Image != null && !(CurrentPage.Image is Umbraco.Core.Dynamics.DynamicNull))
{
    var m = Umbraco.Media(CurrentPage.Image);

    <img src="@m.Url" alt="@m.UrlName" />
}

I hope that it helps somebody else

Answer 2

Thanks Jesus Mogollon,

I've collapsed that to:

<img src="@Umbraco.Media(CurrentPage.headerBackgroundImage).Url" alt="">

I've set the file to mandatory so hopefully I wont need the if statement part.

Answer 3

Having had such an unexpectedly hard time for something that I would have thought would be easy, this snipped worked for me.

@if (Model.Content.HasValue("OtherImages"))
{
   var otherImages = Model.Content.GetPropertyValue<List<IPublishedContent>>("OtherImages");
   foreach (var image in otherImages)
   {
      if (image != null)
      {
         <img src="@image.Url" alt="@image.Name" class="img-responsive img-rounded"  />
      }
   }
}

Much of the other postings did not work for me, but I think that the API has changed a bit. I'm using Umbraco 7.6.1. I'm not sure whether the null check is necessary, but it certainly won't do any harm.

Answer 4

This worked for me, from the Umbraco 6 Media docs, here

var bannerImage = Umbraco.TypedMedia(Model.Content.GetPropertyValue("plainImage"));

<div class="my-banner-wrapper" style="background-image: url(@bannerImage.GetPropertyValue("umbracoFile"));">
    <!-- some irrelevant content -->
</div>

Answer 5

Try this

@if (CurrentPage.Image != null && !(CurrentPage.Image is Umbraco.Core.Dynamics.DynamicNull))
{
    var m = Umbraco.Media((int)CurrentPage.Image);

    <img src="@m.Url" alt="@m.UrlName" />
}

note: You should cast CurrentPage.Image as int because of Umbraco.Media ambigous constructor

Answer 6

 <img src="@Umbraco.Media(Convert.ToString(@Umbraco.Field("image"))).umbracoFile" alt="" />

Answer 7

Inside the template

umbraco:Macro runat="server" language="cshtml"

img src="@Model.MediaById(Model.photo).umbracoFile" alt=""/

/umbraco:Macro

---Model.photo =photo is a alice name

Answer 8

I entered this into the section above the doctype in the template or master being used.

@{
Layout = null;
var regionalPage = Umbraco.Content(this.CurrentPage.Id);
string manangerPhotoUrl = string.Format("https://assets.yourdomain.com{0}", @Umbraco.Media(regionalPage.managerPhoto).Url);
}

Then I added the variable holding the string value to my image source attribute in the markup.

<img class="img-responsive" src="@manangerPhotoUrl" />