Verweis-App relative virtuelle Pfade in der .css-Datei

Question

Angenommen, ich habe ein "Bilder" Verzeichnis unter dem Stammverzeichnis meiner Anwendung. Wie kann ich von einer .css-Datei aus auf ein Bild in diesem Verzeichnis mit einem ASP.NET-App-Relative-Pfad verweisen.

Beispiel:

Wenn ich in der Entwicklung bin, könnte der Pfad von ~/Images/Test.gif zu /MyApp/Images/Test.gif aufgelöst werden, während er in der Produktion zu /Images/Test.gif aufgelöst werden könnte (abhängig vom virtuellen Verzeichnis für die Anwendung). Ich möchte offensichtlich vermeiden, die .css-Datei zwischen Umgebungen ändern zu müssen.

Ich weiß, dass man Page.ResolveClientUrl verwenden kann, um eine URL dynamisch zur Renderzeit in die Style-Sammlung eines Steuerelements einzufügen. Ich würde gerne vermeiden, dies zu tun.

Answer 1

Leider hat Firefox hier einen dummen Fehler ... die Pfade sind relativ zum Pfad der Seite, statt relativ zur Position der CSS-Datei zu sein. Das bedeutet, wenn Sie Seiten an verschiedenen Positionen im Baum haben (zum Beispiel Default.aspx im Stammverzeichnis und Information.aspx im Ansichtsordner) gibt es keine Möglichkeit, dass relative Pfade funktionieren. (IE löst die Pfade korrekt relativ zum Standort der CSS-Datei.)

Das Einzige, was ich finden konnte, ist dieser Kommentar auf http://www.west-wind.com/weblog/posts/269.aspx aber, um ehrlich zu sein, ist es mir noch nicht gelungen, es zum Laufen zu bringen. Wenn ich es schaffe, werde ich diesen Kommentar bearbeiten:

re: Sinnvolle Verwendung von ASP.Net-Pfaden von Russ Brooks 25. Februar 2006 @ 8:43 Uhr

Niemand hat Brants Frage vollständig beantwortet bezüglich der Bildpfade innerhalb der CSS Datei selbst. Ich habe die Antwort. Die Frage war: "Wie verwenden wir anwendungsrelative Bildpfade INNERHALB der CSS-Datei?" Ich war auch lange Zeit von diesem Problem frustriert, also habe ich gerade die letzten 3 Stunden damit verbracht, eine Lösung zu finden.

Die Lösung besteht darin, Ihre CSS-Dateien durch den ASPX-Seiten-Handler laufen zu lassen, dann ein kleines Stück Servercode in jedem der Pfade zu verwenden, um den Applikations-Stamm-Pfad auszugeben. Bereit?

1. Fügen Sie der web.config hinzu:

2. In Ihrem CSS verwenden Sie die Request.ApplicationPath-Eigenschaft überall dort, wo ein Pfad existiert, wie folgt:

   content { background: url(<%= Request.ApplicationPath %>/images/bg_content.gif) repeat-y; }

3. .NET gibt ASPX-Seiten standardmäßig mit dem MIME-Typ "text/html" aus, folglich werden Ihre neuen serverseitigen CSS Seiten mit diesem MIME-Typ ausgeliefert, was dazu führt, dass Nicht-IE-Browser die CSS-Datei nicht korrekt lesen. Wir müssen dies überschreiben, um "text/css" zu sein. Fügen Sie einfach diese Zeile als erste Zeile Ihrer CSS-Datei hinzu:

   <%@ ContentType="text/css" %>

Answer 2

Wenn Sie das nicht wussten, könnten Sie dies tun...

Wenn Sie einem CSS eine relative Pfadangabe zu einer Ressource geben, bezieht sich dies auf die CSS-Datei und nicht die Datei, die das CSS einschließt.

background-image: url(../images/test.gif);

Dies könnte also für Sie funktionieren.

Answer 3

Machen Sie Ihr Leben einfach, indem Sie Bilder, die in Ihrem CSS verwendet werden, einfach im Ordner /css/ neben /css/style.css ablegen. Wenn Sie dann auf Ihre Bilder verweisen, verwenden Sie relative Pfade (z.B. url(images/image.jpg)).

Ich behalte immer noch Bilder, die mit einem angezeigt werden, in einem /images/ Ordner. Fotos zum Beispiel sind Inhalte, sie gehören nicht zum Haut/Thema der Website. Daher gehören sie nicht in den /css/ Ordner.

Answer 4

Die Lösung von Marcel Popescu verwendet Request.ApplicationPath in der CSS-Datei.

Verwenden Sie niemals Request.ApplicationPath - es ist böse! Gibt unterschiedliche Ergebnisse je nach Pfad zurück!

Verwenden Sie stattdessen das Folgende.

background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>);

Answer 5

Legen Sie Ihr dynamisches CSS in einer Benutzersteuerung in einer .ascx-Datei ab, und Sie müssen nicht alle Ihre CSS-Dateien durch den ASP.NET-Seitenprozessor laufen lassen.

<%@ Steuerelement %>
);
}

Aber der einfachste Weg, das ~-Problem zu lösen, besteht darin, überhaupt kein ~ zu verwenden. In Visual Studio, im Solution Explorer, klicken Sie mit der rechten Maustaste auf Ihre Anwendung, wählen Sie Eigenschaftenfenster und ändern Sie den virtuellen Pfad zu /.