How to hide img if src valus is undefine

Ionic Framework ionic-v3
1

I would like to hide the if that is not picture src or defined found, but it always show empty picture column (refer to the picture below). May I know what’s wrong with my code below?

HTML

<img [src]="imgSrc" id="imgPlacement" ngShow="imgSrc !== undefined">

<button block (click)="takePhoto()">
  <ion-icon name="camera"></ion-icon>
  TAKE PHOTO
</button>

JS

takePhoto() {
  var options = {
    destinationType: 1,
    sourceType: 1,
    allowEdit: true,
    encodingType: 0,
    targetWidth: 50,
    targetHeight: 50,
    saveToPhotoAlbum: true,
    correctOrientation:true
  };
  Camera.getPicture(options).then((imageData) => {
      this.imgSrc = imageData;
    },
    (err) => {}
  );
}

Page:
image

1 Like
2

use hidden instead of ngSrc

<img [src]="imgSrc" id="imgPlacement" [hidden]="!imgSrc">

Ionic provides a custom directive:
https://github.com/driftyco/ionic/blob/2.0/ionic/components/img/img.ts

but it is not documented, yet.

it is called ionImg

1 Like
3

Thanks for the suggestion. It works fine to me.

I tried ion-img before, but it is not working for me. The picture is not display, so I reverse back to use img instead

4

I would recommend you to use *ngIf instead because the hidden attribute is tricky, i.e.:

<img [src]="imgSrc" id="imgPlacement" *ngIf="!!imgSrc">

AFAIK ion-img is currently meant to be used only with VirtualList.

2 Likes
5

I’m not sure… ngIf changes DOM, hidden changes style. So hidden is faster than ngIf. If you sure that this image will be shown 100%, sometimes a best choose to use the hidden attribute.

6

The tricky thing is that this style could be overridden very easy by other CSS styles without even noticing it - e.g. just by adding #imgPlacement { display: block; } in the CSS file in order to use some block-element styles - and the hidden is not working anymore.

Define faster - ??ms vs ???ms - would you notice the difference.

I would agree with this if there wasn’t the problem with the CSS styles mentioned above.

1 Like
7

Let’s don’t speak about fool programmers )

Believe me, sometimes you could have an very very complexity page. For example from my work: in Angularjs 1 the difference between ng-if and ng-show would be bigger than some seconds (~1-3). However hg-show has another side of medal…

8

I’m not talking about this - in a real world scenario it’s pretty common to have teams with both developers and designers, i.e. the chances that this style could be overridden by someone are good.

Just to make sure that we’re on the same page - hidden is not an equivalent of ng-hide/ng-show (from Angular 1):

At first glance, binding to the hidden property seems like the closest cousin to Angular 1’s ng-show. However, there is one “!important” difference - ng-show and ng-hide both manage visibility by toggling an “ng-hide” CSS class on the element, which simply sets the display property to “none” when applied. Crucially, Angular controls this style and postscripts it with “!important” to ensure it always overrides any other display styles set on that element.

From the quote above is clear that when using hidden you’re depending on both the browser-specific implementation and the styles that may take effect on this element. For a very simple app (like the example above) it might be perfectly OK. However I would probably consider implementing an equivalent of ng-hide directive for a more complex one.

The question here is about Angular 2 and IMHO comparing Angular 1 to Angular 2 is like comparing apples to oranges - beyond the name and the team behind them, they are pretty different in many aspects. Moreover Angular 2 is a few times faster. In my experience using hidden vs *ngIf for single elements on a simple page makes no difference - in a more complex scenario however this should be taken into consideration.

I guess that everyone has own preference on this topic and there’s no best practice advice that would cover all cases, that’s why I believe that the most important thing is to know the pros/cons and take the decision on a per-case basis.

3 Likes