img zum Button hinzufügen

img zum Button hinzufügen - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Add-ons (https://javascript-forum.de/forumdisplay.php?fid=31)
+--- Forum: Hilfe bei Add-ons programmieren (https://javascript-forum.de/forumdisplay.php?fid=49)
+--- Thema: img zum Button hinzufügen (/showthread.php?tid=2420)

Seiten: Seiten: 1 2

img zum Button hinzufügen - Oly - 15.06.2023

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

RE: img zum Button hinzufügen - rzscout - 15.06.2023

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

RE: img zum Button hinzufügen - AndreasB - 15.06.2023

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?

RE: img zum Button hinzufügen - Oly - 15.06.2023

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.

RE: img zum Button hinzufügen - AndreasB - 15.06.2023

Welchen Wert gibt dir denn

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

zurück?

RE: img zum Button hinzufügen - Oly - 16.06.2023

guten Morgen,

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

[Bild: 20230616061620ad21787bf2f822c510187e82dae7288f.png]

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

RE: img zum Button hinzufügen - AndreasB - 16.06.2023

Morgen.

Steht denn was in deiner "Chrome Plugin" Console?

RE: img zum Button hinzufügen - Oly - 16.06.2023

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

[Bild: 20230616062358ad21787bf2f822c510187e82dae7288f.png]

es ist leer

RE: img zum Button hinzufügen - AndreasB - 16.06.2023

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

RE: img zum Button hinzufügen - Oly - 16.06.2023

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