c# - asp-append-version renders broken image when using @

Question

Using Visual Studio 2015 update 3 and ASP.Net Core 1.1 project.

I have the following simple image code working with asp-append-version.

<img src="~/images/Tulips.jpg" asp-append-version="true" />

The browser view source renders as expected with ?v=version. And the picture displays.

<img src="/images/Tulips.jpg?v=uTUvJWUmAhnbcvwfyJYROibIWGa2nFDTlwxNn1zOgwo" />

I now create a dynamic image name by using C# code @HTML.DisplayFor

<img src="~/images/Tulips_@Html.DisplayFor(modelItem => item.ProductNAME)_picture.png" asp-append-version="true" />

However, the browser view source renders "Microsoft.AspNetCore.Mvc.ViewFeatures.StringHtmlContent" instead of the expected image name "Tulips_NAME_picture.png" and gives the broken image icon.

<img src="/images/Tulips_Microsoft.AspNetCore.Mvc.ViewFeatures.StringHtmlContent_picture.png">

What could I be missing? I would appreciate any help that can be offered.

Answer 1

Html.DisplayFor is not supposed to be used inside elements but rather to create them, what you should use is simply @item.ProductNAME:

<img src="~/images/Tulips_@item.ProductNAME_picture.png" asp-append-version="true" />

Alternatively, create a helper method for this:

public static string GetProductImage(Product product)
{
    return $"~/images/Tulips_{product.ProductNAME}_picture.png";
}

And use it like this:

<img src="@SomeClass.GetProductImage(item)" asp-append-version="true" />