Umbraco 11.1图片渲染问题咨询：为何仅最后写法有效？

Umbraco 7.15.7 原有图片渲染代码 #

之前在Partial Views Macro Files中用以下代码展示图片（因从旧版切换到Media Picker2，返回值为字符串，所以使用.ToString()）：

<figure>
    @if (newsItem.HasValue("articleImg"))   
    {
        <img src="@Umbraco.Media(newsItem.articleImg.ToString()).Url" class="img-fluid news-img" alt="@newsItem.Last().photoAlt" />
    }
</figure>

Umbraco 11.1 失败的渲染尝试 #

在Umbraco 11.1中尝试多种写法均失败：

1. 无报错但不显示图片：

<img src="@Umbraco.Media(newsItem.Value<IPublishedContent>("articleImg").ToString()).Url()" class="img-fluid" alt="@Imaging_pagesToList.Last().Value("photoAlt")" />

2. 同样不显示图片：

<img src="newsItem.Value<IPublishedContent>("articleImg").Url()" class="img-fluid" alt="@newsItem.Value("photoAlt")" />

3. 添加@后抛出错误：Argument 3: cannot convert from 'method group' to 'object?'

<img src="@newsItem.Value<IPublishedContent>("articleImg").Url()" class="img-fluid" alt="@newsItem.Value("photoAlt")" />

仅以下写法成功渲染图片：

var image = newsItem.Value<IPublishedContent>("articleImg");
<img src="@image.Url()" class="img-fluid" alt="@newsItem.Value("photoAlt")" />

问题解答 #

1. 为何仅最后一种写法有效？ #

最后一种写法先将媒体项赋值给变量image，再调用.Url()方法，规避了Razor解析的优先级问题。Razor处理内联表达式时，会优先解析@后的内容，直接链式调用容易导致解析逻辑混乱；先赋值给变量能明确执行顺序，确保newsItem.Value<IPublishedContent>("articleImg")正确获取到媒体对象后，再调用其Url()方法。

2. 前两种写法为何失败？ #

• 第一种写法：Umbraco 9+的Umbraco.Media()方法仅接受媒体ID（Guid或int）作为参数，但你把IPublishedContent对象直接转为字符串传入，相当于传递了整个对象的字符串表示（而非ID），方法无法找到对应媒体项，最终Url()返回空或无效路径，图片自然不显示。
• 第二种写法：src属性内未添加@符号，Razor不会解析该表达式，直接将字符串newsItem.Value<IPublishedContent>("articleImg").Url()作为图片路径，显然是无效路径，导致图片不显示。

3. 这是否是Umbraco 11.1渲染图片的正确方式？ #

这是符合规范的正确写法。Umbraco 9+（基于.NET Core）中，媒体选择器默认返回IPublishedContent类型，先获取媒体对象再调用Url()是适配新API的常规操作。你也可以用更简洁的内联写法，通过括号明确表达式优先级，同时添加空引用保护：

<img src="@(newsItem.Value<IPublishedContent>("articleImg")?.Url())" class="img-fluid" alt="@newsItem.Value("photoAlt")" />

4. Umbraco 9+官方文档示例使用硬编码Guid获取媒体项，如何获取每个节点的Guid？ #

所有内容节点（含媒体节点）都自带Key属性，这就是节点的Guid值：

• 内容节点：直接通过newsItem.Key获取
• 媒体节点：获取到媒体对象image后，通过image.Key获取

在后台内容编辑器中，也可通过节点的「信息」面板查看该Guid（Key值）。

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