1

Estoy bindeando un atributo al src de una imagen en app.component.html así:

<tr *ngFor="let butaca of butacas">  
<img [src]='butaca.imageUrl'>
</tr> 

export class Butaca {

    butacaNegra: string = "https://i.imgur.com/b3PuXoH.png";

    butacaVerde: string = "https://i.imgur.com/h2PlvBk.png";

    butacaBlanca: string="https://i.imgur.com/zHkAQtG.png";

    public id: number;

    public estado: number=0;

    public imageUrl: string;


    constructor (id: number, estado: number){

        this.id = id;

        if (this.estado==0){

            this.imageUrl=this.butacaBlanca;

        }else{

            if(this.estado==1){

                this.imageUrl=this.butacaVerde;

                }else{

                    this.imageUrl=this.butacaNegra;

                }
            }
    }
}

app.component.ts:

public butacas: Array<Butaca> = [

 {id: 1 , estado: 0},

 {id: 2 , estado: 0},

 {id: 3 , estado: 0}

];

Cuando carga la página, la imagen aparece con src nulo: introducir la descripción de la imagen aquí

5
  • Este sitio de es.SO es en Castellano. Por favor, traduce la pregunta al idioma requerido. Si lo que quieres es realizarla en ingles, dirígete a SO.
    – GDP
    el 13 mar. 2019 a las 12:33
  • Además de traducir la pregunta, aprende cómo se escribe con markdown el código fuente, con lo que no tendrás necesidad de alterar las etiquetas html. Edita la pregunta y consulta el botón de ayuda que tienes a la derecha. el 13 mar. 2019 a las 12:37
  • El sitio es en castellano para que las explicaciones sean más fácilmente comprendidas, así como las preguntas. Si el código está en otro idioma, no debería de ser un impedimento. Seamos una comunidad más incluyente.
    – hestellezg
    el 17 mar. 2019 a las 6:25
  • @luis te hace falta en el constructor asignar estado: this.estado = estado; (para que funcione el if-else) , por otro lado, el arreglo de butacas me funciona poniéndolo como public butacas: Array<Butaca> = [ new Butaca(0, 0), ... etc
    – hestellezg
    el 17 mar. 2019 a las 6:31
  • 1
    @hestellez gracias hermano, ya funciona ;DD el 18 mar. 2019 a las 8:12

1 respuesta 1

0

Hay una respuesta en Cómo evitar que Angular2 limpie (Sanitize) mi variable que hace uso de Domsanitizer.bypassSecurityTrustUrl

llevado a tu caso práctico de bindear una url de imagen la forma de hacer el import es:

import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser';

Cambias el type de imageUrl:

public imageUrl: SafeUrl;

Luego en el constructor:

constructor(private sanitizer: DomSanitizer, id: number, estado: number) {
  // ...
}

Y lo usas de esta manera para cada url que quieras bindear:

this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(this.butacaBlanca);

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.