I have some images in the media storage, and I have a "ProductItem" that has a media picker property "productImage". I've read multiple threads and documentation but nothing seems to work. Just want to display the information of each item, including the image.

@inherits Umbraco.Web.Mvc.UmbracoViewPage<ContentModels.Products>
@using ContentModels = Umbraco.Web.PublishedModels;
@{
    Layout = "Master.cshtml";

    var products = Umbraco.Content(Guid.Parse("2740e0b9-caf3-435a-89c5-982ed890e6bd"))
        .ChildrenOfType("ProductItem")
        .Where(x => x.IsVisible())
        .OrderByDescending(x => x.CreateDate);


}

@foreach (var product in products)
{
  <section class="page-section">
    <div class="container">
      <div class="product-item">
        <div class="product-item-title d-flex">
          <div class="bg-faded p-5 d-flex ml-auto rounded">
            <h2 class="section-heading mb-0">
              <span class="section-heading-upper">@product.Value("productSubtitle")</span>
              <span class="section-heading-lower">@product.Value("productTitle")</span>
            </h2>
          </div>
        </div>
        <img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0" src="" alt="">
        <div class="product-item-description d-flex mr-auto">
          <div class="bg-faded p-5 rounded">
            <p class="mb-0">@product.Value("productContent")</p>
          </div>
        </div>
      </div>
    </div>
  </section>
}

Naturally, the first thing I tried was "@product.Value("productImage")", but obviously that didn't work, so I read through many different forum threads and documentation. Either I've done something wrong or the things I read are outdated because I can't seem to display my images. Any help much appreciated!

I'm using the latest version of Umbraco