es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cambiar img [src] específicamente con ngSwitch

10 Jun, 2023 Programación

Quiero cambiar la etiqueta src de la etiqueta img basándome en una condición. En este momento, estoy usando el operador ternario; quiero preguntar si hay una manera de usar ngSwitch en su lugar (SIN REPETIR la etiqueta img). Aquí está mi código:
 

<div>
  <img height='26' width='22' [src]="
       bank.bankName.includes('a') ? 'assets/images/a.png' :
       bank.bankName.includes('b') ? 'assets/images/b.png' :
       bank.bankName.includes('c') ? 'assets/images/c.png' :
       bank.bankName.includes('d') ? 'assets/images/d.png' : ''
  " />
</div>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes usar ngSwitch para cambiar el atributo src de la etiqueta img en función de una condición sin repetir la etiqueta img. Aquí tienes un ejemplo de código que puedes utilizar:

    <div [ngswitch]="true">
  <img height='26' width='22' *ngswitchcase="bank.bankName.includes('a')" [src]="'assets/images/a.png'">
  <img height='26' width='22' *ngswitchcase="bank.bankName.includes('b')" [src]="'assets/images/b.png'">
  <img height='26' width='22' *ngswitchcase="bank.bankName.includes('c')" [src]="'assets/images/c.png'">
  <img height='26' width='22' *ngswitchcase="bank.bankName.includes('d')" [src]="'assets/images/d.png'">
  <img height='26' width='22' *ngswitchdefault="" [src]="''">
</div>

    Aquí, estamos utilizando la directiva ngSwitch y comprobando diferentes condiciones utilizando la directiva ngSwitchCase. Si ninguna de las condiciones coincide, estamos utilizando la directiva ngSwitchDefault para mostrar una imagen vacía. El atributo src de la etiqueta img está vinculado a la correspondiente ruta de imagen utilizando la notación de corchetes.

Comments are closed.