css - Library.GetMediaById Umbraco 返回奇怪的字符串

Question

我正在尝试通过宏在我的 Umbraco 上的轮播中显示图像，我正在使用 Library.GetMediaById(child.picture)。这是我的代码:

        @foreach (var child in slider.Children.Where("Visible"))
        {
            var background = Library.MediaById(child.picture);

            if (i == 0)
            {
                <div id="@i" class="item active" data-id="@i" style="background-image: url(@background.UmbracoFile)">

                </div>
            }
            else
            {
                <div id="@i" class="item" data-id="@i" style="background-image: url(@background.UmbracoFile)">

                </div>
            }

        i++;
        }

然而，当我这样做而不是得到 <div id="1" class="item" data-id="1" style="background-image: url('/media/1007/slide-2.png')"></div> 时就像我应该得到一堆额外的东西一样:

<div id="1" class="item" data-id="1" style="background-image: url({src: '/media/1007/slide-2.png', crops: []})"></div>

我如何只获取该媒体元素 url 而不是所有额外的东西？

顺便说一句，我正在使用 Umbraco 7.4

Answer 1

如果您使用的是 Umbraco 7 或更高版本，我强烈建议您使用新的 API 来检索属性值和内容或媒体节点，而不是使用现在已过时的 Library.MediaById 方法。

如果您更喜欢动态 View 模型，可以使用 DynamicPublishedContent API ，它允许您使用 @CurrentPage 模型编写动态查询。所以你的例子是:

@foreach (var child in CurrentPage.AncestorOrSelf(1).Children.Where("isVisible"))
{
    var backgroundPicture = Umbraco.Media(child.Picture); //assuming an image property on child
     var backgroundPictureUrl = picture.Url;
     // your markup here
}

如果您更喜欢强类型模型，则可以使用 IPublishedContent API .请记住，您的 View 必须继承自合适的类型，例如 Umbraco.Web.Mvc.UmbracoTemplatePage。

@foreach (var child in Model.AncestorOrSelf(1).Children().Where(c => c.IsVisible))
{
     var backgroundPicture = Umbraco.TypedMedia(child.GetPropertyValue<int>("picture");
     var backgroupdPictureUrl = backgroundPicture.Url;
     // your markup here
}

此外，根据您的示例，我怀疑您可能正在使用图像裁剪器属性来存储背景图像，在这种情况下，该属性将具有一个 json (JObject) 值，而不是与媒体 ID 相对应的 int。

在这种情况下，需要调整检索图片属性的代码，查看 documentation for image cropper根据您是否指定了裁剪和/或焦点，查看获取图像 url 的不同方式。例如，如果您使用动态 API 并且只对图像 URL 感兴趣，请使用以下内容:

<div style="background-image: url('@child.picture.src')">