kashi_rock kashi_rock - 1 month ago 14
C# Question

Image not visible while using dynamic image source - MVC5

I am trying to create an image slideshow using MVC5. Here is my model class:

public class ImageSlider
{
public string Source { get; set; }
public string ImageName { get; set; }
public string Title { get; set; }
}


For this model, I'd created a controller and an action within:

public ActionResult _imageSlider()
{
return View(new List<ImageSlider> {
new ImageSlider { Source = "~/_Slider/Images/google.jpg" },
new ImageSlider { Source = "~/_Slider/Images/googlePlus.jpg" },
new ImageSlider { Source = "~/_Slider/Images/facebook.jpg" }
});
}


and here is my partial view:

<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-pause-on-hover="true">
@foreach (var item in Model)
{
<img src="@item.Source" />
}
</div>


Now the problem is that when I create image tag as above, I do not see any image while I can see in my page source that these elements have beeen created. But if I create these tags in HTML, all images are visible. Example:

<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-pause-on-hover="true">
<img src="~/_Slider/Images/google.jpg" />
<img src="~/_Slider/Images/googleplus.jpg" />
<img src="~/_Slider/Images/facebook.jpg" />
</div>


I know I am missing very small thing here but I couldn't figure out what. Can anyone please help me?

mww mww
Answer

You need to use like this, change your View

 @foreach (var item in Model)
    {
        <img src="@Url.Content(item.Source)" />

    }