Umbraco 9中Image Cropper字段thumb缩略图的正确显示方法

报错根因 #

两个报错全是Umbraco 9大版本重构带来的不兼容变更：

• 命名空间整体迁移：Umbraco 8里的Umbraco.Core相关类全部挪到了Umbraco.Cms.Core开头的命名空间下，原来的Umbraco.Core.PropertyEditors.ValueConverters路径已经废弃，自然找不到ImageCropperValue类
• 扩展方法调整：GetCropUrl不再作为IUrlHelper的扩展方法存在，旧文档里@Url.GetCropUrl(...)的写法已经失效，这个方法现在要求从IPublishedContent实例或者ImageCropperValue实例上调用，所以会报接收器类型不匹配的错。

具体实现 #

首先在视图顶部引入必须的命名空间：

@using Umbraco.Cms.Core.PropertyEditors.ValueConverters

写法1：手动获取裁剪URL（兼容原有逻辑） #

如果需要先拿到URL地址做后续判断或处理，可以沿用和Umbraco8接近的逻辑：

@{
    // 从内容节点取homeImage字段的ImageCropper值
    var imgCropper = item.Value<ImageCropperValue>("homeImage");
    // 直接调用扩展方法获取thumb裁剪规则对应的缩略图地址
    var thumbUrl = imgCropper.GetCropUrl("thumb");
}

<!-- 渲染图片 -->
<img src="@thumbUrl" alt="缩略图" />

写法2：一行输出（更简洁） #

如果不需要单独处理URL变量，直接调用IPublishedContent的扩展方法即可，不用手动取ImageCropperValue：

<!-- Model为当前页面的IPublishedContent/强类型内容实例 -->
<img src="@Model.GetCropUrl("homeImage", "thumb")" alt="首页缩略图" />

注意事项 #

• 裁剪别名大小写必须和Umbraco后台配置完全一致，配置的别名是thumb就不要传Thumb，否则会返回原图地址或空值
• 如果需要生成绝对路径的图片地址，可以追加UrlMode参数：@Model.GetCropUrl("homeImage", "thumb", UrlMode.Absolute)
• 不要沿用Umbraco8里手动拼接imgCropper.Src + 裁剪参数的写法，GetCropUrl已经内置处理了媒体路径、缓存版本戳、裁剪参数拼接的逻辑，手动拼接很容易出现路径错误。

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