1async function myFetch() {
2 let response = await fetch('coffee.jpg');
3
4 if (!response.ok) {
5 throw new Error(`HTTP error! status: ${response.status}`);
6 }
7
8 let myBlob = await response.blob();
9
10 let objectURL = URL.createObjectURL(myBlob);
11 let image = document.createElement('img');
12 image.src = objectURL;
13 document.body.appendChild(image);
14 }
15}
16
17myFetch()
18.catch(e => {
19 console.log('There has been a problem with your fetch operation: ' + e.message);
20});
1fetch('coffee.jpg')
2.then(response => {
3 if (!response.ok) {
4 throw new Error(`HTTP error! status: ${response.status}`);
5 }
6 return response.blob();
7})
8.then(myBlob => {
9 let objectURL = URL.createObjectURL(myBlob);
10 let image = document.createElement('img');
11 image.src = objectURL;
12 document.body.appendChild(image);
13})
14.catch(e => {
15 console.log('There has been a problem with your fetch operation: ' + e.message);
16});
1
2
3async function fancyShowRainbow(){
4 const response = await fetch("rainbow.jpg");
5 const blob = await response.blob();
6 document.querySelector(".my-image").src = URL.createObjectURL(blob);
7}
8
9
10function showRainbow(){
11 fetch("rainbow.jpg")
12 .then(res => {
13 console.log(res);
14 return res.blob();
15 })
16 .then(blob => {
17 document.querySelector(".my-image").src = URL.createObjectURL(blob);
18 console.log(blob);
19 })
20 .catch(error => {
21 console.log("ERROR!!");
22 console.error(error);
23 });
24}
25
26
27
1async function myFetch() {
2 let response = await fetch('coffee.jpg');
3 if (!response.ok) {
4 throw new Error(`HTTP error! status: ${response.status}`);
5 }
6 return await response.blob();
7
8}
9
10myFetch().then((blob) => {
11 let objectURL = URL.createObjectURL(blob);
12 let image = document.createElement('img');
13 image.src = objectURL;
14 document.body.appendChild(image);
15}).catch(e => console.log(e));