How can I replace the image?

Question

How can I replace the image?

Navigation

#1 by (2 votes)

1

.ts

  public change() {
this.logo.nativeElement.src=data.image ;
  }

I can not detect the "logo" or the date.imge

html

  <img class="img-position" #logo src={{img}}>
<img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">
<button md-raised-button color="accent" (click)="change()">

angular

asked by Enric 28.03.2018 в 11:02

source

1 answer

Delete n rows of a table Differences between ReciclerView and ListView

score 2 · Answer 1

As he said "Jack, the ripper":

Let's go in parts

Logo : This variable does not detect it in change() because you are not passing it:

Template

       <img class="img-position" #logo src="{{img}}">
       <input type="button" md-raised-button color="accent" (click)="change(logo)" value="Cambiar"/>

Component

    change(logo){
       logo.src=data.image;
    }

Note: You do not have to access nativeElement (which in this case would be undefined ).

Data : Can you tell us how you are defining the object data ?

I have created a test interface and it works without problems:

Component

      interface Data{
         image: string;
      }

      data: Data;

      ngOnInit(){ 
        this.data= {image: "ruta a mi imagen"};

Template

       <img [src]="data.image">

As soon as we see how you build the object, I edit the answer with the possible solution.