JSFiddle - React, Tailwind, and code Playground

HTML

<form onsubmit="LoadImage(document.getElementById('inputSrc').value, UpdateImageInformation); return false;">
    <input type="text" id="inputSrc" value="http://jsfiddle.net/img/logo.png" />
    <input type="submit" value="Load image" />
</form>

<div id="image_information">
    Width: <span id="width">?</span><br />
    Height: <span id="height">?</span><br />
    
    <div id="image"></div>
</div>

CSS

input {
    margin: 2px;
    display: block;
}

input[type="text"] {
    width: 300px;
}

#image_information {
    background: #ff9;
    border: thin solid #660;
    border-radius: 10px;
    padding: 7px;
}

JavaScript

function LoadImage(imgSrc, callback){
      var image = new Image();
      image.src = imgSrc;
      if (image.complete) {
        callback(image);
        image.onload=function(){};
      } else {
        image.onload = function() {
          callback(image);
          // clear onLoad, IE behaves irratically with animated gifs otherwise
          image.onload=function(){};
        }
        image.onerror = function() {
            alert("Could not load image.");
        }
      }
    }

    function UpdateImageInformation(image) {
      document.getElementById('width').innerHTML = image.width;
      document.getElementById('height').innerHTML = image.height;
      document.getElementById('image').innerHTML = "<img src='" + image.src + "' alt='' />";
    }