Skip to main content
2 de 3
se añadieron 5 caracteres en el cuerpo
user avatar
user avatar

¿Cómo puedo reemplazar una imagen desde front-end por otra?

Tengo el siguiente código en el que deseo que los visitantes puedan cambiar el texto (ya lo hice) y que también puedan cambiar la imagen por defecto. No necesito que se puedan guardar los cambios, sé que si se refresca la página los cambios se pierden, esto no es problema.

¿Es posible hacer esto tal vez con un input type="file" oculto dentro de la imagen por defecto?

He visto páginas donde inclusive es posible copiar la imagen desde el PC y luego pegarla en el espacio por default sin más acciones.

Muchas gracias!

.profile-pic {
  display: block;
  margin: 0 auto;
  height: 300px;
  width: 300px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background: url("https://academicos.uchilefau.cl/wp-content/uploads/2012/07/no_avatar15.jpg") center no-repeat;
  background-size: cover;
  max-width: 200px;
  max-height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container wrapper image-cropper">
  <div class="profile-pic"></div>
  <h1 contenteditable="true" maxlength="9" class="ngt text-uppercase mb-0 effect-shine" style="padding: 2rem 0;">NOMBRE</h1>
  <h3 contenteditable="true" class="font-weight-light mb-0" style="padding-bottom: 2rem;">Cargo</h3>
</div>

user119165