Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Source einer <img> Komponente mit JS verändern
#1
Hi, ich weiß gerade wirklcih nicht mehr weiter. 
Ich möchte mit einem Funktionsaufruf die Quelle eines Bildes verändern.
Das ist mein Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>League Rank Overlay</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <div id="rank-overlay">
       <div id="top-side">
        <div id="left-side">
            <div>
            <img id="icon" src="rank_icons/master.png", alt="Icon"></img>
            </div>
        </div>
            <div id="right-side">
                <div id="rank-text">
                    <div id="player-name"> Eliisboss </div>
                    <span id="rank-division">2</span>
                    <span id="rank-tier">Diamond</span>
                    <span id="rank-lp">54lp</span>
                </div>
            </div>
       </div>
        <div id="bottom-side">
            <div id="profile-link">
                <div>www.op.gg/summoners/euw/Eliisboss </div>
            </div>
        </div>
    </div>


    <!-- Einbindung des JavaScript am Ende des Body -->
    <script src="overlay.js"></script>
</body>
</html>

Code:
function updateOverlay(data) {
    document.getElementById("rank-tier").textContent = data.rank;
    document.getElementById("rank-division").textContent = data.division;
    document.getElementById("rank-lp").textContent = data.lp;
    document.getElementById("summoner-name").textContent = data.player;
    document.getElementById("profile-link").textContent = "www.op.gg/summoners/euw/" + data.summonerName;
    document.getElementById("icon").src = "rank_icons/Grandmaster.png";
    document.getElementById("player-name").textContent = data.player;

}

Weiß eventuell jemand, woran es liegt?
Danke!
Zitieren
#2
Guten Morgen, ein frohes neues Jahr und willkommen im Forum!
Das img-Tag braucht kein schließendes </img> aber daran wird es nicht liegen.
Um das zu untersuchen, müsste man die Seite besuchen können, aber ein häufiger Kandidat für die Problemursache ist die Groß- und Kleinschreibung: Fängt "Grandmaster.png" wirklich mit einem Großbuchstaben an?png 
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Zitieren
#3
Die Dateien sind alle richtig benannt, ich habe da wirklich alles erdenkliche probiert. Ich konnte das Problem aber etwas eingrenzen.
Erstmal: Die Funktion wird durch ein Python Script alle 10 Sekunden aufgerufen (websocket). Wenn ich das so mache, wird jetzt statt dem ursprünglichen Icon, welches im HTML Code steht, einfach der Alt Text angezeigt und ein kleines "Bild" Icon angezeigt. Ich nehme mal an, dass das daran liegt, dass das Bild nicht gefunden wurde. Das Kuriose ist aber, dass ich wenn ich die Funktion an einen Button binde, die Änderung des Icons funktioniert, mit dem exakt gleichen Pfad zu dem Bild. Ich habe auch wirklich alle erdenklichen Möglichkeiten für den Pfad zu dem Bild probiert, aber nichts funktioniert. Gibt es noch irgendwelche anderen Möglichkeiten diese img source zu verändern? Ich kenne mich mit JS CSS HTML nicht besonders gut aus... Vielleicht hilft die Info auch, dass die img source im eignentlichen HTML Code auch gerne leer sein kann. Es geht wirklich nur um die Daten, die es vom Python Script bekommt

Ich habe den Fehler jetzt gefunden. Es lag tatsächlich am Pfad, weil das Python Skript nicht im selben Ordner liegt, wie die HTML Datei...
Trotzdem vielen Dank und ein frohes neues Jahr
Zitieren
#4
Das liest man immer gern, wenn ein Problem gelöst werden konnte! Ich wünsche ebenfalls eine frohes neues Jahr!
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Zitieren
#5
Hallo und frohes Neues!

Ich würde immer mit console.log arbeiten und in der Konsole deines Browsers prüfen, wenn du mit dem Document-Objekt arbeitest.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste