Heim >Web-Frontend >CSS-Tutorial >Wie lade ich lokale Bilder mit CSS in Chrome-Erweiterungen?

Wie lade ich lokale Bilder mit CSS in Chrome-Erweiterungen?

DDD
DDDOriginal
2024-11-10 07:13:02344Durchsuche

How to Load Local Images with CSS in Chrome Extensions?

Lokale Bilder können nicht mit CSS in Google Chrome-Erweiterungen geladen werden

Bei Website-Änderungen durch Inhaltsskripting innerhalb von Chrome-Erweiterungen können beim Versuch Schwierigkeiten auftreten lokale Bilder zu nutzen. Dieses Problem besteht trotz der Einbindung der Bilder in die Erweiterung weiterhin.

Die Herausforderung ergibt sich aus der spezifischen CSS-Syntax, die zum Verweisen auf lokale Bilder verwendet wird:

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

Lösung

Um diese Einschränkung zu beheben, bietet die Chrome i18n-Unterstützung eine entscheidende Lösung:

  • Behalten Sie Ihre Bilder bei in einem dafür vorgesehenen „Bild“-Ordner innerhalb der Erweiterung.
  • Referenz-Assets im CSS mithilfe der folgenden Syntax:
background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');

Stellen Sie sicher, dass die Bilder in den „web_accessible_resources“ enthalten sind. Array in der Datei manifest.json, das Berechtigungen für den Zugriff auf diese Ressourcen über die Erweiterung gewährt.

Das obige ist der detaillierte Inhalt vonWie lade ich lokale Bilder mit CSS in Chrome-Erweiterungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn