JSFiddle - React, Tailwind, and code Playground
HTML
<input type='file' />
</br>
<img id="myImg" src="#" alt="your image" style="display: none;" width=100 />
<img id="myImg" src="#" alt="your image" style="display: none;" width=200 />
<img id="myImg" src="#" alt="your image" style="display: none;" width=400 />
<img id="myImg" src="#" alt="your image" style="display: none;" width=800 />
JavaScript
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
function imageIsLoaded(e) {
$('img').attr('src', e.target.result);
$('img').fadeIn();
};