Entonces, tengo este código Javascript, que es responsable de cambiar la imagen de nuestra foto de perfil. Entonces, la parte cambiante funciona absolutamente bien, puedo cargar un archivo y cambiar la imagen. Entonces, cuando inicia sesión, obtiene una imagen de perfil predeterminada, en la que luego puede hacer clic en un botón para cambiar su imagen de perfil. Entonces, esa imagen predeterminada en particular es una imagen con un radio de borde de 25 px. Entonces, el único problema que encuentro ahora es que, cuando cargo la imagen, debería cargarse y cargarse con un radio de borde de 25 píxeles. Pero después de la carga, solo se carga como una imagen simple sin un radio de borde, pero quiero que la imagen se cargue para que tenga un radio de borde de 25 píxeles. ¿Cómo podría lograr esto? Aquí está el código:

JavaScript:

 <script type="text/javascript"> const imgDiv = document.querySelector('.profile-pic-div'); const img = document.querySelector('#thePFP'); const file = document.querySelector('#file'); file.addEventListener('change', function(){ // this refers to the file const choosedFile = this.files[0]; if (choosedFile) { const reader = new FileReader(); reader.addEventListener('load', function(){ img.setAttribute('src', reader.result); }); reader.readAsDataURL(choosedFile); } }); </script>

HTML:

 <img class="pfp" id="thePFP" src="img/pfp.png"> <div class="profile-pic-div"> <img src="img/cam.png" class="camera" id="camera"> <input type="file" class="file" id="file" accept="image/*" style="cursor: pointer"> </div>

PD. La imagen con la clase "pfp" es la imagen predeterminada de la que estaba hablando, cuando inicia sesión, esa imagen con la clase "pfp" es la imagen predeterminada que mencioné.