Fetch an Image

This is JavaScript program demonstrates how to fetch an image.

FetchImage.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script>
			// NOTE: THIS REQUIRES A WEB SERVER TO RUN
			function Initialize() {
				fetch("XoaXLogo.png").then((qResponse) => {
					if (!qResponse.ok) {
						throw new Error(`HTTP error, status = ${qResponse.status}`);
					}
					return qResponse.blob();
				}).then((qBlob) => {
					const kqObjectURL = URL.createObjectURL(qBlob);
					const kqImageElement = document.querySelector(".idImage");
					kqImageElement.src = kqObjectURL;
				}).catch((qError) => {
					const kqElementP = document.createElement("p");
					let qBody = document.getElementsByTagName("body")[0];
					let sTextMessage = document.createTextNode(`Error: ${qError.message}`);
					kqElementP.appendChild(sTextMessage);
					qBody.insertBefore(kqElementP, kqImage);
				});
			}
		</script>
	</head>
	<body onload="Initialize()">
		<img src="" class="idImage" />
	</body>
</html>

Core JavaScript

Fetch an Image

FetchImage.html

Output