How to show an image in JavaScript
You can put HTML inside JavaScript code or use the document.body.appendChild()
.
Method 1:
Use innerHTML
.
Example:
<div id="myImage"></div>
<script>
document.getElementById('myImage').innerHTML = '<img src="https://snippetsdb.com/wp-content/uploads/2021/12/example-image.jpg">';
</script>
Method 2:
Use appendChild()
.
Example:
<div id="myImage"></div>
<script>
var img = document.createElement("img");
img.src = 'https://snippetsdb.com/wp-content/uploads/2021/12/example-image.jpg';
document.getElementById('myImage').appendChild(img);
</script>
If needed, you can also define more parameters.
Example:
<div id="myImage"></div>
<script>
var img = document.createElement("img");
img.src = 'https://snippetsdb.com/wp-content/uploads/2021/12/example-image.jpg';
img.width = 427;
img.height = 640;
img.alt = 'Probably Tucan, but I\'m not a bird expert.';
document.getElementById('myImage').appendChild(img);
</script>