img zum Button hinzufügen

[Oly]

Hallo zusammen,

benötige mal einen Rat und komme nicht weiter eiinen Button ein IMG hinzuzufügn.
Das Icon befindet sich im selben Ordner wie das AddOn selbst.

Code:

        document.querySelector("#industry > div:nth-child(1) > div > div > div.col-xs-8").innerHTML += `
    <button type="button">
        
        <img src="gehen.png" height="10" width="10" />
    </button>`;

wie muss ich src ändern, so das es das png aus dem Ordner nimmt? oder kann man es vorher als Ressouce laden um es zu verwenden?

---

selbst mit

Code:

    const url = chrome.runtime.getURL("gehen.png");
        document.querySelector("#industry > div:nth-child(1) > div > div > div.col-xs-8").innerHTML +=
            `
    <button type="button">
        
        <img src="` +
            url +
            `" height="100" width="100" />
    </button>`;

bekomme ich das Bild nicht angezeigt

[rzscout]

Moin Oly,
ich würde dir empfehlen Buttons mit einer anderen Methode zu erstellen. Das Problem mit innerHTML ist das es nicht richtig in den DOM aufgenommen wird und Probleme mit JavaScript entstehen könnte.

Hier meine Lösung:

Code:

let myObjContainer = document.querySelector("#industry > div:nth-child(1) > div > div > div.col-xs-8");
let myButton = document.createElement('button');
    myButton.classList.add('meinButtonKlasse');
    myObjContainer.appendChild(myButton);
let myImage = document.createElement('img');
    myImage.src = 'unterverzeichnis/bilddatei.png';
    myImage.setAttribute('style', 'height: 10px; width: 10px');
    myButton.appendChild(myImage);

Die JavaScript-Methode document.createElement erstellt ein HTML-Element und die JS-Methode appendChild fügt dem jeweiligen selktierten Element das erstellte Element hinzu.

Viel Spass beim ausprobieren und wenn es weitere Probleme gibt einfach ins Forum schreiben.

VG

rzscout

[AndreasB]

Laut der Dokumentation von getURL gibt die Funktion einen Pfad zurück relativ zu dem Ort, wo dein Manifest liegt.
im Fall von

Code:

chrome.runtime.getURL("gehen.png")

würde es also den Pfad /gehen.png ausgeben (Du kannst dir das ganze auch einfach mal in der Console ausgeben)
Du musst also schauen, wie du von deinem Manifest zu deinem gesuchten Bild kommst.

edit: @"rzscout" Das interessiert mich: Wie äußert sich das denn, dass die Methode innerHTML nicht richtig in den DOM mit aufgenommen wird und wo in der w3C Spec kann ich das nachlesen?

[Oly]

Das PNG liegt im gleichen Ordner wie die Manifest. Habe auch Mal ausprobiert das PNG zu verkleinern, da ich dachte es könnte zu groß sein, aber genau das selbe. Es wird mir nicht angezeigt.

[AndreasB]

Welchen Wert gibt dir denn

Code:

chrome.runtime.getURL("gehen.png")

zurück?

[Oly]

guten Morgen,

wenn ich es in der Console ausgebe, erscheint ein Fehler, sonst nicht.


ich denke mal, weil ich es in der Console nicht ausgeben kann?

[AndreasB]

Morgen.

Steht denn was in deiner "Chrome Plugin" Console?

[Oly]

wie gesagt, es erscheint sonst kein Fehler und so sieht es auf der Seite aus.





es ist leer

[AndreasB]

Ich meine nicht die Konsole des Browsers, sondern die deines Plugins (chrome://extensions/).
Werden DA irgendwelche Fehler angezeigt?

[Oly]

habe das schon verstanden und nein, es erscheint kein Fehler

---

habe jetzt mal zum testen das Bild verkleinert und auch mal in ein anderes Format gebracht. Bleibt unverändert

---

Beim Bsp von @"rzscout"  ist es genau das selbe Ergebnis