显示/隐藏离子按钮中的图片

Question

I'm writing an App in Ionic 3, where I want to show pictures which are hidden with the

document.getElementById("ImgID").style.display = "none";

Attribute. Therefore I took a button which will change the Attribute to

document.getElementById("ImgID").style.display = "";

My .ts file:

  button_tapped(){
    document.getElementById("ImgID1").style.display = "";
    document.getElementById("ImgID2").style.display = "";
    document.getElementById("ImgID3").style.display = "";
  }

My .html file for the button:

<ion-img    
   class = "button_img_1"   
   (click)="button_tapped()"   
   src="path_to_image"> 
</ion-img>

My .html file for the Image:

<ion-img 
  class = "Image_1"
  id = "Image_1"
  src="path_to_image">
</ion-img>

my .css for the image:

.Image_1{
        width: 10%;
        height: 0;
        position: absolute;
        padding-bottom: 3%;
        top: 65%;
        left: 20%;
    }

So, if I start the app with not showing the picture, and press the button, the images wont show up, just a grey square at their position. But if I implement another button for hiding the image, start the app showing the pictures, press the button to hide them, and press the "show"-button, they appear like they should.

Does anyone know where my problem is?

Answer 1

IONIC uses Angular. So you can also use *ngIf to show/hide the image(s) on tap. You put the *ngIf on the image(s).