0

Quiero modificar una imagen que esta dentro de un etiqueta a en HTML con un document.getElementById() pero me da un error porque no lo encuentra por estar dentro del enlace. Estoy usando Angular 10.

Este es el error que obtengo en la consola cuando intento cambiar la imagen. introducir la descripción de la imagen aquí

Mi codigo HTML:

<li class="nav-item" *ngIf="identity">
  <a class="nav-link" id="identity_name"><img id="image-logged"
    src="{{url + 'get-user-image/'}}{{identity.image}}"
    class="img-user"> {{identity.name}}</a>
</li>

Como puedo acceder a la etiqueta img para cambiar su src?

Mi codigo actual:

document.getElementById('image-logged').setAttribute('src', image_path);
3
  • 1
    El código parece estar correcto. Yo intenté correrlo en codepen y en realidad hace lo que esperas que haga. ¿No será que ese código esté utilizando algo como Angular? ¿Podrías incluir quizas el error que te está dando para poderte asistir de la mejor manera? el 18 nov. 2020 a las 3:34
  • Una alternativa es con querySelector("#image-logged") para seleccionar el elemento, de todas formas facilita mucho las cosas si utilizas el editor de SO para hacer un pequeño ejemplo aplicable.
    – Ange Reyna
    el 18 nov. 2020 a las 3:56
  • @ArmandoHoyos si estoy usando angular, ya edite la publicación con el error que me aparece en la consola. el 18 nov. 2020 a las 5:18

2 respuestas 2

2

En Angular, nunca es recomendable el uso de document.getElementById para obtener acceso a un elemento en la plantilla del componente desde la clase del componente. Como ya mencionó hawks, puedes utilizar el decorador @ViewChild o también puedes manipular identity.image en algún punto dentro de la clase.

if (condicionEspecial) {
  identity.image = image_path;
}

Si identity es un elemento dentro de un arreglo que es renderizado o si deseas reemplazar el URL completo, entonces podrías hacer lo siguiente:

<li class="nav-item" *ngIf="identity">
  <a class="nav-link" id="identity_name"><img id="image-logged" src="{{ condicionEspecial ? url + 'get-user-image/' + identity.image : image_path }}" class="img-user"> {{identity.name}}</a>
</li>
1

La renderización de la imagen es condicional en el DOM por el *ngIf="identity". Si identity es false la img no se insertará y por lo tanto document.getElementById('image-logged') será null.

1a solución

// si identity es true se setea el atributo de la imagen sino no
if (identity) {
  document.getElementById('image-logged').setAttribute('src', image_path);
}

2a solución

// se comprueba que exista el elemento y luego se setea el atributo
if (document.getElementById('image-logged')) {
  document.getElementById('image-logged').setAttribute('src', image_path);
}

3a solución Puedes mirar de usar el decorador ViewChild para seleccionar elementos de la template.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.