Entonces, quiero establecer el atributo <img src=""> usando JavaScript, pero la fuente sería un valor de elemento de entrada.
<img src="" id="userImage" onclick="changeImage()"> <input type="file" id="imageInput"> function changeImage() { var userImage = document.getElementById("imageInput").value; document.getElementById("userImage").src = userImage; } Nota: <input type="image"> no me funciona porque no muestra la ventana para seleccionar la imagen.
Cuando abro la consola, muestra
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEMEPuede usar FileReader para leer la entrada como una dataURL de datos y luego agregar esa URL como la image src
function read(val) { const reader = new FileReader(); reader.onload = (event) => { document.getElementById("divOutput").src = event.target.result; } reader.readAsDataURL(val.files[0]); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>File uploader</title> <script src="./script.js" defer></script> </head> <body> <h1>My file uploader</h1> <input type='file' id='userImage' onchange = "read(this)"> <img id='divOutput'></div> </body> </html>