Image not visible while using dynamic image source - MVC5

Question

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?

When you see the items created, do they have the correct source i.e. exactly the same as when you create them in html directly? — AsheraH, Nov 08 '16 at 08:42
@AsheraH, Yes. Infact I copied above static html code from the page source — kashi_rock, Nov 08 '16 at 08:43
@mww, it worked this way. But can you explain what is the basic difference using `` — kashi_rock, Nov 08 '16 at 08:48

M. Wiśnicki · Accepted Answer · 2016-11-08T08:58:56.157

0

You need to use @Url.Content like this, change your View.

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

    }

edited Nov 08 '16 at 08:58

answered Nov 08 '16 at 08:51

M. Wiśnicki

6,094
3
23
28

Image not visible while using dynamic image source - MVC5

1 Answers1