Image not loading as intended ASP.NET MVC - asp.net

Question

I have a view model in which I have declared a few variables in a class for example picture, name, description and so forth. The picture variable contains the url for the various images which are stored locally in the project file. I then display those variables in my view but for some reason the image would not load...After inspecting the element using chrome dev tools the image url is correct but the actual image isn't loading correctly and it throws a 404 error in the browser for the images, could someone please explain to me why this would be happening and maybe just point me in the right direction.
ViewModel code:
public class MyViewModel : Product
{
private string _Picture;
private string _Name;
private string _Description;
public MyViewModel(string picture, string name, string description, int price, int quantity) : base(price, quantity)
{
_Picture = picture;
_Name = name;
_Description = description;
}
public string Picture
{
get { return _Picture; }
set { _Picture = value; }
}
public string Name
{
get { return _Name; }
set { _Name = value; }
}
public string Description
{
get { return _Description; }
set { _Description = value; }
}
}
Controller code:
public class MyController : Controller
{
public ActionResult Index()
{
List<MyViewModel> data = GetData();
return View(data);
}
private List<MyViewModel> GetData()
{
List<MyViewModel> data = new List<MyViewModel>();
MyViewModel data1 = new MyViewModel("~/Images/image.png", "Name", "Description", 200, 0);
data.Add(data1);
return data;
}
}
View code:
#model List<MyProject.ViewModels.MyViewModel>
#{
ViewBag.Title = "Data";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
<div class="row">
#foreach (var data in Model)
{
<div class="col-md">
<div class="card text-white bg-dark" style="width: 18rem;">
<img class="card-img-top" src="#data.Picture" alt="#data.Name">
<div class="card-body">
<h5 class="card-title">#data.Name</h5>
<p class="card-text">#data.Description</p>
<p class="card-text">Price: #data.Price</p>
<label for="customRange3">Select Quantity:</label>
<form>
<input type="range" class="custom-range quantitySlider" name="amountRange1" min="0" max="5" value="#data.Quantity" step="1" id="quantity" oninput="this.form.amountInput1.value=this.value" />
<input type="button" class="btn btn-outline-success" value="Add to Cart" /><input type="text" class="form-control bg-light quantityInput" name="amountInput1" value="0" readonly />
</form>
</div>
</div>
</div>
}
</div>
</div>
The ouput:
Inspecting the element in chrome dev tools:

Answer 1

Try this in your view:
<img class="card-img-top" src="#Url.Content(data.Picture)" alt="#data.Name">

Answer 2

Another option is to change
MyViewModel data1 = new MyViewModel("~/Images/image.png", "Name", "Description", 200, 0);
to:
MyViewModel data1 = new MyViewModel(#"/Images/image.png", "Name", "Description", 200, 0);