Display Image from Media Library in Umbraco 7
Solution 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
Solution 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.
Solution 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.
Solution 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>
Solution 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
Informagic
Robotics PhD, currently working as software lead in the satellite business, filling my leisure hours with robotics projects.
Updated on August 23, 2022Comments
-
Informagic over 1 year
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!