Warum sind meine Bilder kaputt, wenn ich MVC4 StyleBundles verwende?

MVC4 StyleBundle löst Bilderproblem

Bei der Verwendung von MVCs StyleBundle zum Kombinieren von CSS-Dateien und externen Bildreferenzen in Unterordnern tritt ein Problem auf. Wenn Sie ein Bundle mithilfe eines virtuellen Pfads definieren, der nicht einem physischen Inhaltspfad entspricht, werden relative Bildpfade innerhalb der CSS-Dateien unterbrochen.

Lösung

Der richtige Ansatz besteht darin, das Bundle auf demselben Pfad wie die zu kombinierenden Quelldateien zu definieren. Zum Beispiel:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                    .Include("~/Content/css/jquery-ui/*.css"));

Durch die Definition des Bundles auf demselben Pfad wie die Quell-CSS-Dateien bleiben die relativen Bildpfade gültig. Dies liegt daran, dass der letzte Teil des Bundle-Pfads effektiv als Dateiname für die gebündelte CSS-Datei dient.

Alternative Lösung

Wie von Hao Kung vorgeschlagen, ein alternativer Ansatz besteht darin, eine CssRewriteUrlTransformation zu verwenden, um Bildverweise innerhalb der gebündelten CSS-Datei neu zu schreiben:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                    .Include("~/Content/css/jquery-ui/*.css",
                     new CssRewriteUrlTransform()));

Diese Transformation wird automatisch durchgeführt Ändern Sie relative Bildpfade, um sicherzustellen, dass sie nach dem Bündeln auf die richtige Position zeigen.

Hinweis

Bei der Verwendung von CssRewriteUrlTransformation ist es wichtig, sich möglicher Probleme beim absoluten Umschreiben bewusst zu sein Pfade innerhalb eines virtuellen Verzeichnisses. Dieses Verhalten ist möglicherweise nicht für alle Szenarien geeignet.

Das obige ist der detaillierte Inhalt vonWarum sind meine Bilder kaputt, wenn ich MVC4 StyleBundles verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!