Quiero escribir una página html simple donde haya una etiqueta img y una etiqueta de entrada.

Estoy tratando de escribir el javascript que leerá la selección del archivo de imagen de los usuarios y cambiará o agregará el 'src' en la etiqueta img para mostrar la imagen de los usuarios sin cargarla en un servidor.

Esto no funciona y no puedo resolverlo:

 <input type="file" id="file"> <img id="user_img" src="user_img"> <script type="text\javascript" > const user_img = document.querySelector('#img') document.querySelector('#file').addEventListener('input', event => { if (event.target.files.length === 0) { console.error('No file provided') return } const reader = new FileReader() reader.addEventListener('loadend', () => { user_img.src = reader.result }) reader.readAsDataURL(event.target.files[0]) }) </script>