Bild dynamisch laden mit Javascript

Question

Ich habe ein Div Element und darin ein Bild.

<div>
<img src="http://example.com/image.png" style="im-grid image">
</div>

Wie kann ich das Bild mit Javascript auswechseln?

Answer 1

Um ein Bild mit JavaScript auszutauschen, kannst du die src Eigenschaft des img Elements ändern.

<script>
function loadImage() {
    
    var img = document.getElementById('dynamicImage');
    img.src = "http://example.com/new-image.png";
 
}
</script>

<div>
    <img id="dynamicImage" src="http://example.com/image.png">
    <button onclick="javascript:loadImage()">Klick</button>
</div>