Anzeigen einer lokalen SVG

  • Hallo zusammen,


    ich verstehe folgendes nicht:

    Ich möchte eine SVG-Grafik anstatt einer vorgegebenen Grafik in einem MagicMirror Modul laden.

    Dafür muss ich in der custom.css die neue Grafik hinterlegen.

    Eine Datei aus dem Internet wird geladen und angezeigt, wenn ich das so eintrage:

    Code
    .waste-pickup-icon.recycle {
      background-image:url('https://www.svgrepo.com/show/270587/recycle-bin-trash.svg');
    }


    Aber wenn ich das wie folgt eintrage um meine lokale Datei zu laden, dann funktioniert das nicht ... warum nicht?

    Code
    .waste-pickup-icon.recycle {
      background-image:url('../modules/MMM-MyWastePickup/recycle-bin1.svg');
    }


    Und "ja", die Datei existiert:

    pi@MM3:~/MagicMirror/css $ ls -al ../modules/MMM-MyWastePickup/recycle-bin1.svg

    -r--r--r-- 1 pi pi 38730 9. Dez 2021 ../modules/MMM-MyWastePickup/recycle-bin1.svg

    Ich verstehe es nicht. :conf:

    Wer kann mir helfen?

    Danke!

  • Ich hab das SVG heruntergeladen, umbenannt, und ins lokale html-Directory gelegt. Das funktioniert problemlos.


    Vermutlich ist dein Path nicht in Ordnung. Leg das File direkt neben die HTML-Seite und probiere es ohne Path.

  • Moin!

    Erst einmal vielen Dank für die Antworten.

    Es geht hier aber nicht um einen reinen Webserver, sondern um einen MagicMirror

    --> https://github.com/MichMich/MagicMirror

    Hier nutze ich das Modul MMM-MyWastePickup, das mir (und meiner Familie) die nächsten

    Müllabfuhl-Termine auf dem Spiegel anzeigt.

    Nun möchte ich (und hatte es in geraumer Vorzeit schon einmal geschafft), ein Icon austauschen.

    Das sollte ich in der css/custom.css machen.

    Wenn ich ein Beispiel Icon (svg) aus dem Internet nehme, dann klappt das auch.

    Wenn ich mir das aber lokal ablege (um dann nach erfolgreichem Zugriff die Farbe noch von Grün nach Blau zu wechseln), dann geht das nicht mehr.


    Ich bin nach dieser Anleitung vorgegangen: https://forum.magicmirror.buil…14270/mmm-mywastepickup/9

    Weitere Tipps?

    Danke!