Umbraco - 如何在IMG标签的src中显示媒体选择器中的图像？

Question

如何获取使用umbraco中的媒体选择器选择的图像的网址 - 我找到了umbraco文档，其中突出显示媒体选择器的返回值是所选项目的ID。但是，这肯定会用于将图像添加到模板中吗？

我想要做 ...

<div class="title" style="background-image:url(@Umbraco.Field("mediaPicker"))">
   <h1>[email protected]("pageTitle")</p>
</div>

谢谢

Answer 1

根据Umbraco Documentation你有两个选择，我的建议是与第一个一起使用，因为我相信在将来的版本中将支持动态。

1. Typed

@if (Model.Content.HasValue("caseStudyImages"))
{
    var caseStudyImagesList = Model.Content.GetPropertyValue<string>("caseStudyImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var caseStudyImagesCollection = Umbraco.TypedMedia(caseStudyImagesList).Where(x => x != null);

    foreach (var caseStudyImage in caseStudyImagesCollection)
    {      
        <img src="@caseStudyImage.Url" style="width:300px;height:300px" />      
    }                                                               
}

2. dynamic

@if (CurrentPage.HasValue("caseStudyImages"))
{
    var caseStudyImagesList = CurrentPage.CaseStudyImages.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    var caseStudyImagesCollection = Umbraco.Media(caseStudyImagesList);

    foreach (var caseStudyImage in caseStudyImagesCollection)
    {
        <img src="@caseStudyImage.Url" style="width:300px;height:300px" />
    }
}

id是用于将媒体对象作为TypedMedia对象返回的内容，从那里您可以访问图像URL。

Answer 2

你可以使用Umbraco.Media()这是一个像Umbraco.Content()一样的动态

<div class="title" style="background-image:url(@Umbraco.Media(CurrentPage.MediaPicker).Url)">
   <h1>[email protected]</p>
</div>

Answer 3

轻松显示图像的方式：

//Get the ID of the Field
var mediaId = Umbraco.Field("NameOfYourField");
//Get the MediaType to Write the URL
var media   = Umbraco.Media(mediaId.ToString());
//Salve the Path into the Image
var image   = media.Url;

<img src="@image">

简单易行。