Este es mi código HTML:

 <div class="mb-3" style="width: 50%; margin: 0 auto; border: 2px solid white;"> <label for="file">Select your snippet file :</label><br> <input type="file" id="myfile" name="myfile" accept=".pdf,.jpg,.png"> </div> <div class="container"> <span id="preview_text" style="text-align: center; vertical-align: middle; line-height: 200px; color: red;">No preview available</span> <img id="scanOutput" src="#" style="height: 200px;"/> </div>

Este es mi javascript:

 myfile.onchange = evt => { const [file] = myfile.files if (file) { if(file.type=="image/jpeg" || file.type=="image/png"){ if(document.getElementById("preview_text")!=null) document.getElementById("preview_text").remove(); if((file.size/1024)<200){ scanOutput.src = URL.createObjectURL(file); document.getElementsByClassName("container")[0].style.border="2px solid green"; } else{ scanOutput.src="#"; if(document.getElementById("preview_text")==null){ var elem=document.createElement("SPAN"); elem.id="preview_text"; elem.innerText="File size should not be greater than 200kb"; elem.style="text-align: center; vertical-align: middle; line-height: 200px; color: red;"; document.getElementsByClassName("container")[0].appendChild(elem); } document.getElementsByClassName("container")[0].style.border="2px solid red"; } } else if(file.type=="application/pdf"){ //how do I preview the pdf into my <img> field? } } }

Puedo obtener una vista previa de las imágenes jpg/png en mi etiqueta <img> , pero no el pdf. También quiero poder obtener una vista previa de los archivos pdf en mi campo img . ¿Cómo puedo hacer eso?