Image not loading as intended ASP.NET MVC

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:

Can you also show what the rendered view img tag output looks like? — G_P
– G_P, Commented Jun 22, 2020 at 16:59

G_P · Accepted Answer · 2020-06-22 17:18:48Z

1

Try this in your view:

<img class="card-img-top" src="@Url.Content(data.Picture)" alt="@data.Name">

answered Jun 22, 2020 at 17:18

G_P

2,1783 gold badges16 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anthony Horter · Accepted Answer · 2020-06-22 17:34:50Z

0

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);

answered Jun 22, 2020 at 17:34

Anthony Horter

551 silver badge12 bronze badges

Collectives™ on Stack Overflow

Image not loading as intended ASP.NET MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related