在Umbraco宏中如何获取子页面媒体选择器图片的URL？

嘿，我来帮你搞定这个Umbraco媒体选择器的问题！其实核心是要先从内容节点里拿到媒体节点的引用，再获取媒体节点的URL——不同Umbraco版本的API略有差异，我分情况给你具体代码：

Umbraco 7/8 版本（传统MVC/Web Forms） #

在这些版本里，媒体选择器通常存储的是媒体节点的ID（或后期版本的Udi），你需要先通过ID/Udi获取媒体节点，再提取URL：

var quadrants = startNode.Children.OrderByDescending(x => x.CreateDate); 
@foreach (var quadrant in quadrants){
    // 渲染标题
    <h3>@quadrant.GetPropertyValue("Title")</h3>

    // 处理媒体选择器图片（替换featureImage为你的属性别名）
    var mediaId = quadrant.GetPropertyValue<int>("featureImage");
    if (mediaId > 0) {
        var mediaItem = Umbraco.TypedMedia(mediaId);
        if (mediaItem != null) {
            // 基础图片URL输出
            <img src="@mediaItem.Url" alt="@mediaItem.GetPropertyValue("altText")" />
            
            // 如果用了Image Cropper，可获取指定裁剪尺寸的URL
            // <img src="@mediaItem.GetCropUrl("homepageHeroCrop")" alt="@mediaItem.GetPropertyValue("altText")" />
        }
    }
}

如果你的媒体选择器存储的是Udi（Umbraco 8后期版本可能默认用这个），可以改成这样：

var mediaUdi = quadrant.GetPropertyValue<Udi>("featureImage");
if (mediaUdi != null) {
    var mediaItem = Umbraco.Media(mediaUdi);
    if (mediaItem != null) {
        <img src="@mediaItem.Url" alt="@mediaItem.GetPropertyValue("altText")" />
    }
}

Umbraco 9+ 版本（.NET Core） #

.NET Core版本的Umbraco API有更新，需要用UmbracoHelper来获取媒体节点，属性获取改用Value<T>()：

@inject Umbraco.Cms.Core.Web.IUmbracoContextAccessor UmbracoContextAccessor
@{
    var umbracoHelper = new Umbraco.Cms.Web.Common.UmbracoHelper(UmbracoContextAccessor);
}

var quadrants = startNode.Children.OrderByDescending(x => x.CreateDate); 
@foreach (var quadrant in quadrants){
    // 渲染标题
    <h3>@quadrant.Value("Title")</h3>

    // 处理媒体选择器图片（替换featureImage为你的属性别名）
    var mediaId = quadrant.Value<int?>("featureImage");
    if (mediaId.HasValue) {
        var mediaItem = umbracoHelper.Media(mediaId.Value);
        if (mediaItem != null) {
            // 基础图片URL
            var imageUrl = mediaItem.Url();
            
            // 如果用了Image Cropper，获取裁剪后的URL
            // var imageUrl = mediaItem.GetCropUrl("cropAlias");
            
            <img src="@imageUrl" alt="@mediaItem.Value("altText")" />
        }
    }
}

注意事项 #

• 一定要把代码里的featureImage替换成你实际的媒体选择器属性别名
• 加上空值判断很重要，避免出现空引用错误
• 如果你的媒体选择器是Image Cropper类型（不是普通的媒体选择器），用GetCropUrl()可以输出指定尺寸的裁剪图，适配不同页面布局更方便

内容的提问来源于stack exchange，提问作者Louise