CODEWITHSUNDEEP
c#asp.netasp.net-mvcasp.net-mvc-4
Greg
Greg

Reputation: 11480

The Mystery of an Image

So I'm developing a Model View Controller (MVC) project. Due to the size and complexity, I'm trying to ensure organization. I've managed to stumble on a unique quandary, one that has left me quite stumped. My issue is drawn from a Jquery Rotator that I'm integrating into my site.

My Solution Explorer:

Those three sub-folders contain more specific and honed in details, an example would be the Scripts contains another folder called Rotator for this jQuery implementation.

So the dilemma occurs inside the View.

An example within this View:

<div class = "banner-style">
     <div id = "Infinite-Banner">
          <div class = "banner-container">
                <div class = "slides">
                      <img src = "~/Content/Images/Banner/Slides/One.jpg">
                      <img src = "~/Content/Images/Banner/Slides/Two.jpg">
                </div>
          </div>
     </div>
</div>

So within this structure it doesn't appear to load the Images. Though it is properly mapped to the directory. But if you use the same structure above but change the img portion to:

<div class = "slide-one" />
<div class = "slide-two" />

Then in a the correlating Stylesheet, simply define a background: url(~/Content/Images/Banner/Slides/One.jpg); for the slide-one Element it magically appears.

So this makes me believe that it is due to nesting. But doesn't quite make sense, as this will force me to build an inner element between the div slides so that I can generate the proper affects.

The other idea would be to create a model that maps all the relational image data; but that seems like an awful lot of work.

Is this a limitation or an issue specific to my machine? What would be the best work around to such an issue? Is this indeed due to the structure I've taken to my folders?

Upvotes: 1

Views: 102

Answers (1)

Justin Helgerson
Justin Helgerson

Reputation: 25521

Try using the Url.Content method:

<img src="@Url.Content("~/content/images/banner/slides/one.jpg")" />

You didn't post what the actual URL is being built as, but, I would guess that the path is wrong because whatever controller you're hitting is being used in the relative path.

Upvotes: 5

Related Questions