JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" accept="image/*"  multiple onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil_0" style="width:20%; margin-top:10px;"  src="" alt="image"/>
<img id="thumbnil_1" style="width:20%; margin-top:10px;"  src="" alt="image"/>
<img id="thumbnil_2" style="width:20%; margin-top:10px;"  src="" alt="image"/>

JavaScript

function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil_"+i);            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }