I am trying to render an image from a Media Picker property inside a Partial View in Umbraco Cloud.

The code works but the image isn't rendered. I am getting this

"Umbraco.Cms.Core.Models.MediaWithCrops`1[Umbraco.Cms.Web.Common.PublishedModels.Image]"

inside the src attribute within the img tag in html.

I've tried all the solutions found here and elsewhere and I can't figure out what I am doing wrong. Thanks.

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@using Umbraco.Cms.Core
@using Umbraco.Cms.Core.Models.PublishedContent
@using Umbraco.Cms.Core.Routing
@using Umbraco.Extensions

@inject IPublishedValueFallback PublishedValueFallback
@inject IPublishedUrlProvider PublishedUrlProvider

@{
var selection = Umbraco.Content(Guid.Parse("1b8344b6-81b8-46f7-a643-2bdc0fc2b3a0"))
.ChildrenOfType("menuItem")
.Where(x => x.IsVisible());

var menuIndex = 1;
}

@foreach (var item in selection)
{
if(item.Children.Any())
{
<li class="first-level d-flex align-items-center">
  <div class="icon-holder d-flex align-items-center">
    <div class="menu-icon"><img src="@item.Value("itemIcon")"></div>
                @item.Name()
  </div>

  <div class="submenu-inner" data-submenu="@menuIndex">

     <h4>@item.Name()</h4>
     <ul class="list">
         @foreach(var child in item.Children)
         {
         <li><a href="@child.Url()" target="_blank">@child.Name()</a></li>
        }
    </ul>
  </div>
 </li>
   menuIndex++;
} else
{
   <li class="first-level d-flex align-items-center">
       <div class="icon-holder d-flex align-items-center">
         <div class="menu-icon"><img src="@item.Value("itemIcon")"></div>
                @item.Name()
       </div>
   </li>
}
}