Umbraco 11获取Image Media Picker图片URL遇空引用异常求助

问题核心原因 #

你遇到的System.NullReferenceException来自两个关键点：

1. 部分announcementDetails节点未配置announcementDetailImage字段，导致thumbnail变量为null，直接调用方法触发空引用
2. 混淆了Umbraco内容节点与媒体节点的Url调用方式：内容节点用Url()方法，而媒体节点的Url是属性，不能加括号调用

修复步骤 #

1. 强制添加Null安全检查 #

在使用thumbnail前必须判断是否为null，避免空引用错误：

@foreach (var item in selection)
{
    var thumbnail = item.Value<IPublishedContent>("announcementDetailImage");
    <li>
        <!-- 动态设置背景图地址，无图片时保留默认# -->
        <div class="thumbnail-img" style="background-image:url('@(thumbnail != null ? thumbnail.Url : "#")')"></div>
        <a href="@item.Url()">@item.Name()</a>
        
        <!-- 仅当图片存在时才输出内容 -->
        @if (thumbnail != null)
        {
            <p>图片地址：@thumbnail.Url</p>
        }
    </li>
}

2. 正确获取媒体Url #

由于你的thumbnail是MediaWithCrops<T>类型，可根据需求选择两种Url获取方式：

• 获取原始图片地址：thumbnail.Url（注意是属性，无需加括号）
• 获取指定裁剪预设的图片地址：thumbnail.GetCropUrl("你的裁剪预设名称")（需先在Umbraco后台配置对应裁剪规则）

3. 可选优化：使用强类型模型 #

若启用Umbraco强类型模型生成，建议替换字符串字段名为强类型属性，获得编译时错误检查：

// 假设自动生成的强类型模型为AnnouncementDetails
var thumbnail = item.AnnouncementDetailImage;

关键注意事项 #

• 永远不要假设媒体字段必有值，Null检查是必备操作
• 严格区分内容节点与媒体节点的Url调用语法：内容用Url()，媒体用Url属性
• 使用裁剪Url前，需确保后台已配置对应的裁剪预设

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