Der Unterschied zwischen Bildpfaden in CSS und Javascript

Als ich heute Code eingegeben habe, wollte ich eine Funktion zum Wechseln von Avataren schreiben, aber hier kommt das Problem: Der Avatar wird einfach nicht angezeigt. Plötzlich hatte ich eine Idee, dass die Art und Weise, Bildpfade in CSS und JavaScript zu schreiben, unterschiedlich ist. ? ?

Hmm... es ist so:

1. Erstellen Sie eine neue „Bilder“-Datei im Stammverzeichnis und fügen Sie zwei Bilder bg1.png und bg2.png hinein
2. Im Stammverzeichnis werden zwei neue Ordner „style“ und „script“ erstellt, um die verwendeten .css-Dateien und .js-Dateien zu speichern.
3. index.html enthält

   <div id="pic">
   <p>开心吗</p>
   </div>

4. Wenn ich den Bildhintergrund des Tags mit dem ID-Bild festlegen möchte, schreibe dies in die CSS-Datei:

   #pic{ background:url(../images/bg1.png); }

5. In der js-Datei sollte der Pfad als images/bg1.png geschrieben werden

Wie auch immer,

(1) Bei JS-Skripten wird das HTML-Skript in die Seite geladen und zusammen analysiert (es ist dasselbe, als ob Ihr JS-Skript direkt auf dieser Seite geschrieben würde)

(2) Für CSS-Dateien wird nur ein Link bereitgestellt und dieser nicht in die HTML-Seite geladen. In diesem Beispiel sucht HTML beispielsweise anhand des Links nach der erforderlichen Bilddatei in der CSS-Datei.

Der Bilddateipfad von CSS ist relativ zu sich selbst, und der Bilddateipfad von JS ist relativ zu der Datei, in der er sich befindet.