I am trying to get an image from html that I have using fetch(). I am using Cors anywhere proxy to not have a problem with CORES. Here is the code I am using that I have altered from https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/. I am trying to do the same thing but cross domain. The problem is that I get [object HTMLImageElement] instead of an image. Any help is appreciated.
Thank you
<!doctype html>
<html lang="en">
<head>
<script>
function getimg(){
fetch('https://cors-anywhere.herokuapp.com/https://www.bing.com/images/search?q=word&form=HDRSC2&adlt=strict&first=1&cw=1366&ch=665')
.then(function (response) {
// The API call was successful!
return response.text();
}).then(function (html) {
// Convert the HTML string into a document object
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
// Get the image file
var img = doc.querySelector('img');
console.log(img);
//this is where I think I need to be doing something else
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
}
getimg();
</script>
</head>
<body>
<div id = myDiv>
</div>
</body>
</html>
how can I display the image instead of [object HTMLImageElement]?