JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<div class="container">
<div class="image dog">

</div>
</div>

CSS

html, body { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
}
.container {
  height: 100vh; 
  background-color: #e3e3e3;
  display: flex; 
  align-items: center;
}
.image {
  width: 100%; height: 200px; background-color: white;
  }

JavaScript

// =============== image
			var imgUrl = "https://images.drivebc.ca/bchighwaycam/pub/cameras/11.jpg"
			placeDog = "https://place.dog/300/200"
			randomDog = "https://random.dog/woof.json?filter=mp4,webm/" // https://github.com/AdenFlorian/random.dog
			dogCeo = "https://dog.ceo/api/breeds/image/random"
			//document.querySelector(".place-dog").src=placeDog;
			//document.querySelector(".myImgClass").src=imgUrl;
			async function foo(whichDog) {
				let obj;
				const res = await fetch(whichDog)
				obj = await res.json();
				
				//console.log(obj)
				console.log(obj.url);
				imgUrl = obj.url;
				document.querySelector(".dog").src = imgUrl;
			}
			//document.querySelector(".credit").src="I'm a Little Teapot";
			//document.getElementById("credit").innerHTML = "I'm a little teapot";
			foo(randomDog);