StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMVC4 StyleBundle not resolving images
text
Body
copied!<p>My question is similar to this:</p> <blockquote> <p><a href="https://stackoverflow.com/questions/9780099/asp-net-mvc-4-minification-background-images">ASP.NET MVC 4 Minification & Background Images</a></p> </blockquote> <p>Except that I want to stick with MVC's own bundling if I can. I'm having a brain crash trying to figure out what the correct pattern is for specifying style bundles such that standalone css and image sets such as jQuery UI work.</p> <p>I have a typical MVC site structure with <code>/Content/css/</code> which contains my base CSS such as <code>styles.css</code>. Within that css folder I also have subfolders such as <code>/jquery-ui</code> which contains its CSS file plus an <code>/images</code> folder. Image paths in the jQuery UI CSS are relative to that folder and I don't want to mess with them.</p> <p>As I understand it, when I specify a <code>StyleBundle</code> I need to specify a virtual path which does not also match a real content path, because (assuming I'm ignoring routes to Content) IIS would then try to resolve that path as a physical file. So I'm specifying:</p> <pre><code>bundles.Add(new StyleBundle("~/Content/styles/jquery-ui") .Include("~/Content/css/jquery-ui/*.css")); </code></pre> <p>rendered using:</p> <pre><code>@Styles.Render("~/Content/styles/jquery-ui") </code></pre> <p>I can see the request going out to:</p> <pre><code>http://localhost/MySite/Content/styles/jquery-ui?v=nL_6HPFtzoqrts9nwrtjq0VQFYnhMjY5EopXsK8cxmg1 </code></pre> <p>This is returning the correct, minified CSS response. But then the browser sends a request for a relatively linked image as:</p> <pre><code>http://localhost/MySite/Content/styles/images/ui-bg_highlight-soft_100_eeeeee_1x100.png </code></pre> <p>Which is a <code>404</code>.</p> <p>I understand that the last part of my URL <code>jquery-ui</code> is an extensionless URL, a handler for my bundle, so I can see why the relative request for the image is simply <code>/styles/images/</code>. </p> <p>So my question is <strong>what is the correct way</strong> of handling this situation? </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload