Bild anzeigen mit JavaScript

Siddharth Swami 18 Oktober 2021

JavaScript JavaScriptImage

JavaScript ist als Webentwicklungssprache bekannt. Durch die Verwendung von JavaScript können wir unsere Webseite attraktiv gestalten, indem wir Bilder einfügen.

Standardmäßig verwenden wir das <img>-Tag in HTML, um Bilder anzuzeigen. Im Tag <img> haben wir eine Methode namens src, die hilft, die Quelle des Bildes zu ermitteln, das wir zur Anzeige gegeben haben. In src müssen wir den kompletten Pfad des Bildes angeben; andernfalls wird ein Fehler ausgegeben. Die Breite und Höhe des Bildes müssen ebenfalls angegeben werden.

JavaScript hat einen eigenen img-Tag, der uns hilft, ein Bild in unsere Webseite einzufügen. Wir können eine wiederverwendbare Funktion erstellen. Hier verwenden wir das Element img wieder, aber anders.

Wir werden eine Funktion namens display_image() erstellen, die aus den Parametern source, width, height und alt eines darin enthaltenen Bildes besteht. Wir verwenden ein createElement() zum Erstellen eines Elements in der Funktion. Auf diese Weise können wir Bilder dynamisch anzeigen, wo immer wir diese Funktion aufrufen.

Zum Beispiel,

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
function display_image(src, width, height, alt) {
    var a = document.createElement("img");
    a.src = src;
    a.width = width;
    a.height = height;
    a.alt = alt;
    document.body.appendChild(a);
}
display_image('JavaScript.jpg', 
                 276, 
                 110, 
                 'JavaScriptImage');
</script>
</body>
</html>

Ausgabe:

Bild mit Javascript anzeigen

Das obige Beispiel zeigt ein Bild auf der Webseite basierend auf der bereitgestellten Quelle an. Die Funktion document.body.appendChild() fügt das angegebene Element zum Body der Webseite hinzu.