如何在我的 Umbraco 页面上显示来自 属性 的图片?
How do I display a picture from a property on my Umbraco Page?
我在 Umbraco 上有一组页面,上面有 MediaPickers,这些图片将作为链接显示在索引页面上,以便客户在单击它们时可以转到其产品的特定页面。
我已经设法加载了链接,但是使用下面的代码我无法显示适当的图片,因为下面的代码抛出了空引用异常
`var media=Umbraco.TypedMedia(subitem.Properties.Where(x=>x.PropertyTypeAlias=="picture")).SingleOrDefault().Url;`
有人可以帮忙吗?完整代码如下
@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>
你看过这个解决方案吗?据我所知,以下解决方案应该有效。
Display Image from Media Library in Umbraco 7
而且我刚刚查看了我的一个 Umbraco 项目,下面是我如何获得 Umbraco 图像 - 请注意这是 Umbraco 网络表单,它是背后的代码;
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;
}
}
以及您需要的 MediaHelper,希望对您有所帮助;
/// <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..
}
我在 Umbraco 上有一组页面,上面有 MediaPickers,这些图片将作为链接显示在索引页面上,以便客户在单击它们时可以转到其产品的特定页面。
我已经设法加载了链接,但是使用下面的代码我无法显示适当的图片,因为下面的代码抛出了空引用异常
`var media=Umbraco.TypedMedia(subitem.Properties.Where(x=>x.PropertyTypeAlias=="picture")).SingleOrDefault().Url;`
有人可以帮忙吗?完整代码如下
@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>
你看过这个解决方案吗?据我所知,以下解决方案应该有效。 Display Image from Media Library in Umbraco 7
而且我刚刚查看了我的一个 Umbraco 项目,下面是我如何获得 Umbraco 图像 - 请注意这是 Umbraco 网络表单,它是背后的代码;
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;
}
}
以及您需要的 MediaHelper,希望对您有所帮助;
/// <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..
}