ASP.NET Displaying image acording to the correct ID

I'm working on a school project and I'm trying to display a image for each product in my ASP.NET application. However I've been on this issue the whole day and I can't seem to find a fix.

In my controller I have this code for loading all the products for each category and image data:

public IActionResult GetProducts(int id)
{
    var model = new ShoppingCartModel
    {
        Products = service.GetProducts().Where(c => c.CategoryID == id),
            Categories = categoriesService.GetCategories(),
    	    Images = imageService.GetImages(),
	        ProductImages = new Dictionary<int, string>()
    };

    foreach (var product in model.Products)
    {
	    var image = model.Images.FirstOrDefault(img => img.ImageID == product.ImageID);

	    if (image != null)
	    {
	        model.ProductImages.Add(product.ProductID, image.ImagePath);
	    }
    }
    return View(model);
}

I load all the data from the database into the Images which is a IEnumerable. The table contains a ImageID and a ImagePath data looks like this '1' | 'images/filename.png'. Each product has a ImageID linked to it:

public IEnumerable<Images>? Images { get; set; }
public Dictionary<int, string> ProductImages { get; set; }

All files are in my wwwroot folder in my ASP.NET project. So wwwroot/images/filename.png. My model also has a ProductImages which is a Dictionary<int, string> which I will use to find the correct imagePath for the product.

I then loop in all the products in the foreach, and find the correct image for each product and add them to the dictionary.

Then I have this in my view:

@foreach (var item in Model.Products)
{
    @if (Model.ProductImages.ContainsKey(item.ProductID))
    {
	  var imagePath = Model.ProductImages[item.ProductID];
	  <img src="@imagePath" alt="Product Image"/>
    }
}

When I replace the src with src="images/filename.png" it does work. I already debugged to see what imagePath was and it's the correct imagePath. I have no idea why it's not working. I've also tried doing it with JavaScript and then passing the path back into the src but no luck.

I'd appreciate any help with this!

It may depend on where your View is. Try to specify a relative path not from the current directory, but from the root directory. The path must start with /, for example: "/images/filename.jpg"

@foreach (var item in Model.Products)
{
    @if (Model.ProductImages.ContainsKey(item.ProductID))
    {
       var imagePath = $"/{Model.ProductImages[item.ProductID]}";
       <img src="@imagePath" alt="Product Image"/>
    }
}

Please copy here <img src="@imagePath" alt="Product Image"/>, from source code of your browser, after page generated.