Warum sind meine relativen Bildpfade in externen JavaScript-Dateien nach der Bereitstellung fehlerhaft?

Relative Pfade in Javascript in einer externen Datei

In der gegebenen Frage hat der Benutzer Probleme mit der Bildpfadführung in einer externen JavaScript-Datei, wenn sie in einem virtuellen Verzeichnis bereitgestellt wird . Während die Pfade in einer lokalen Entwicklungsumgebung gut funktionieren, schlagen sie fehl, wenn sie mit „../“ oder absoluten Pfaden wie „/Images/filters_collapse.jpg“ bereitgestellt werden.

Das wichtigste Verständnis hier ist, dass Pfade in externen . js-Dateien sind relativ zu der Seite, in der sie enthalten sind. Daher sollte der Benutzer Pfade relativ zur Seite verwenden, auf der auf die JavaScript-Datei verwiesen wird, und nicht zum tatsächlichen Speicherort der .js-Datei.

Als Lösung kann der Benutzer eine JavaScript-Variable erstellen, die das Bild angibt Pfad, wie zum Beispiel:

var imagePath = '../Images/';

Durch die Verwendung dieser Variable kann der Benutzer sicherstellen, dass die Bildpfade unabhängig vom Speicherort der externen JavaScript-Datei korrekt aufgelöst werden. Der folgende Code verwendet beispielsweise die Variable, um das Hintergrundbild eines Elements festzulegen:

$("#toggle").click(function() {
    if (left.width() > 0) {
        AnimateNav(left, right, 0);
        $(this).css("background", "url(" + imagePath + "filters_expand.jpg")");
    }
    else {
        AnimateNav(left, right, 170);
        $(this).css("background", "url(" + imagePath + "filters_collapse.jpg")");
    }
});

Das obige ist der detaillierte Inhalt vonWarum sind meine relativen Bildpfade in externen JavaScript-Dateien nach der Bereitstellung fehlerhaft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!