Concatenating image path from Database in asp.net core - asp.net-mvc

Question

I am trying to concatenate a base path of image folder with a complete path coming from a DB in a .cshtml file to show image on the page but nothing is working out in my end. The best solution that I have tried is,
#foreach (var item in Model)
{
string img = #"~/pics"+Html.DisplayFor(modelItem=>item.ImagePath);
<article>
#*My Dynamic Article*#
<div class="content">
<h3>#Html.DisplayFor(modelItem => item.Name)</h3>
<img src="#img" width="95%" alt="Laser" />
<p>Hello</p>
</div>
</article>}
But this too is outputting something strange, I see this path in the output on web browser,
<img src="~/picsMicrosoft.AspNetCore.Mvc.ViewFeatures.StringHtmlContent" width="95%" alt="Laser" />
Tell me some method that works fine with asp.net core MVC latest release. Thanks

Answer 1

To solve this problem, you can put the content of the img variable directly into the src attribute, and add the # symbol directly in front of Html.DisplayFor(modelItem=>item.ImagePath).
Here is the work code:
#foreach (var item in Model)
{
<article>
#*My Dynamic Article*#
<div class="content">
<h3>#Html.DisplayFor(modelItem => item.Name)</h3>
<img src="~/pics/#Html.DisplayFor(model =>item.ImagePath)" width="95%" alt="Laser" />
<p>Hello</p>
</div>
</article>}
Or you can directly get ImagePath by following:
<img src="~/pics/#item.ImagePath" width="95%" alt="Laser" />
Here is the test result: