在 Umbraco 7 中显示媒体库中的图像答案

【问题标题】：Display Image from Media Library in Umbraco 7在 Umbraco 7 中显示媒体库中的图像
【发布时间】：2014-06-01 18:58:49
【问题描述】：

这应该是非常简单的事情，但我无法让它工作：我只想在部分视图模板中显示上传到 Umbraco 媒体库 (Umbraco 7.1.1) 的图像。代码是

@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>
}

其中 BannerBackgroundImage 是页面的自定义属性。但是，当显示此内容时，@imgUrl 将替换为 #。

我尝试过的其他替代方案包括 multiple Media Picker images、how to display a Media Picker image、get image from media with Razor 和 display image from Media Picker，仅举几例。

如果有人能帮助我解决我认为是菜鸟的问题，我将不胜感激！

【问题讨论】：

标签： umbraco umbraco7

【解决方案1】：

我发现这种方法既简单又干净：

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

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

我希望它可以帮助别人

【讨论】：

+1 经过大量搜索和尝试，这是唯一对我有用的答案。
我无法理解的是，为什么媒体选择器还没有这样做？是否有充分的理由不使用不同的函数来输出 ID，而不是调用呈现所需图像的 URL？
哪里 M = 什么？！

【解决方案2】：

感谢耶稣 Mogollon，

我已将其折叠为：

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

我已将文件设置为强制，因此希望我不需要 if 语句部分。

【讨论】：

【解决方案3】：

在我认为很容易的事情上经历了如此出乎意料的艰难时期，这个片段对我有用。

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

许多其他帖子对我不起作用，但我认为 API 发生了一些变化。我正在使用 Umbraco 7.6.1。我不确定是否需要进行 null 检查，但它肯定不会造成任何伤害。

【讨论】：

【解决方案4】：

这对我有用，来自 Umbraco 6 Media 文档，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>

【讨论】：

【解决方案5】：

试试这个

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

注意：由于 Umbraco.Media 模棱两可的构造函数，您应该将 CurrentPage.Image 转换为 int

【讨论】：

【解决方案6】：

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

【讨论】：

请在您的答案中添加一些解释，以帮助 OP 和其他人理解您发布的代码。
在给出之前答案是正确的，但它的过程太长了..第一个 Umbraco.Field("Image") 这是页面中的媒体选择器并返回它的 id。另一个和img路径的语法一样......我只是简单地写。

【解决方案7】：

模板内

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

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

/umbraco:宏

---Model.photo =照片是爱丽丝的名字

【讨论】：

【解决方案8】：

我将此输入到正在使用的模板或主文件中的文档类型上方的部分中。

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

然后我将保存字符串值的变量添加到标记中的图像源属性中。

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

【讨论】：