PageImage is not rendered on Product page

[antonysmith-mandogroup]

On the Product page of the Alloy template, the PageImage property is rendered as such:

<div epi-property="@Model.CurrentPage.PageImage" />

This results in the image's name being rendered, rather than the image, e.g.:

I've assumed that this is not the intention and looked at a couple of resolutions.

As per the tag helper docs, we can replace the div with an img which will render the image:

However, in doing so, we only set the src attribute and we don't set the other attributes that we do in the ImageFileViewComponent.

Therefore, we can also render the image, with the additional properties, by updating ProductPage\Index.cshtml to inject IContentLoader, retrieve the content item based on the ContentReference and use that to render the ImageFileViewComponent:

    @if (pageImageContent != null)
    {
        @await Component.InvokeAsync("ImageFile", pageImageContent);
    }
    else
    {
        <img epi-property="@Model.CurrentPage.PageImage" />
    }

Where pageImageContent is set as: var pageImageContent = contentLoader.Get<ImageFile>(Model.CurrentPage.PageImage);

This results in the image rendering and the additional attributes being set:

Not sure which of these would be seen as the right/best approach to resolve, if any!

Let me know if you'd like me to make one of these changes (or any other change!) and I'll raise a PR.