Necesito editar una clase llamada "aula" que tiene los atributos id, nombre, profesor e imagen. Hasta ahora, la carga y edición de imágenes en la base de datos está funcionando, pero en la página de edición me gustaría mostrar la nueva imagen antes de hacer clic en el botón de actualización. He hecho algo pero nada funciona si alguien me puede ayudar por favor.

El código de la edición de la vista:

 {% block title %}Edit Classe{% endblock %} {% block body %} <h1>Edit Classe</h1> {{ form_start(form) }} {{ form_errors(form) }} {{ form_row(form.nom) }} {{ form_row(form.enseignant) }} {{form_row(form.image)}} <img id="output" src="{{ asset('img/course/small/'~ classe.image) }}" alt="course" class="card-img card-img-horizontal-lg sh-18 sw-lg-16 h-lg-100"> {{ form_row(form.cours) }} {{ include('classe/_form.html.twig', {'button_label': 'Update'}) }} {{ form_end(form) }} <script> function file_changed(){ var selectedFile = document.getElementById('input').files[0]; var img = document.getElementById('img') var reader = new FileReader(); reader.onload = function(){ img.src = this.result} reader.readAsDataURL(selectedFile); } </script> {% endblock %}