Load base64 image data in img html element using javascript
<div> <input class="file-input" type="file" accept="image/*"> </div> <div> <img width="200px" class="img"> </div> var fileInput = document.querySelector(".file-input"); fileInput.addEventListener("change", function(e) { var file = e.target.files[0]; var reader = new FileReader(); reader.addEventListener("loadend", function(e) { var imgEl = document.querySelector(".img"); imgEl.setAttribute("src", reader.result); }); reader.readAsDataURL(file); }); Pen: https://codepen.io/shaaheed/pen/mKNroG