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
Freigeben: 2024-11-10 07:13:02
Original
343 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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');
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage