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!

score 35 · Accepted Answer · answered Jun 05 '14 at 20:58

35

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

answered Jun 05 '14 at 20:58

Jesus Mogollon

616
5
5

1

+1 After alot of searching and trying, this was the only answer that worked for me. – Moduo Jul 18 '14 at 09:06
1

what I can't understand is, why doesn't the media picker already do this? Is there a good reason not to have a different function that outputs the ID as opposed to a call that renders the URL of the desired image? – Neurothustra Nov 12 '14 at 22:36
WHERE M = WHAT?! – Cloud Apr 04 '18 at 08:59

score 14 · Answer 2 · answered Nov 18 '14 at 14:36

14

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.

answered Nov 18 '14 at 14:36

Craig Poole

600
6
16

NickBeaugié · Answer 3 · 2017-07-28T08:18:32.840

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.

score 2 · Answer 4 · answered Apr 20 '14 at 01:08

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>

score 2 · Answer 5 · answered Jul 27 '15 at 08:16

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

score 1 · Answer 6 · answered Apr 01 '17 at 12:02

1

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

answered Apr 01 '17 at 12:02

Urvish Patel

134
11

Please add some explanation to your answer to help the OP and others in understanding the code you posted. – Felix Apr 01 '17 at 12:31
In answer is correct before give but its too long process.. first Umbraco.Field("Image") which is media picker in page and return id of that. another is same as syntax of img path....i just write in short. – Urvish Patel Apr 03 '17 at 05:24

score 0 · Answer 7 · answered Feb 25 '15 at 12:11

0

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

answered Feb 25 '15 at 12:11

Rajkumar

91
9

score 0 · Answer 8 · answered Aug 22 '17 at 22:32

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" />

Display Image from Media Library in Umbraco 7

8 Answers8

Linked