Ion-img cannot be found in Directive

Ionic Framework ionic-v3
1

Hi there,

I’m having an issue where my “ion-img” DOM element isn’t found by the ng2 selector in a directive. When I use a standard “img” tag the selector finds the DOM element. Anyone know why? Example trying to use “ion-img” is below:

ImageDirective.ts

import {Component, Directive, Output, EventEmitter, Input, SimpleChange, ElementRef, HostListener} from '@angular/core'

@Directive({
  selector: 'ion-img[default]',
  host: {
    '(error)':'updateUrl()',
    '[src]':'src'
  }
})
export class DefaultImage {
  @Input() src:string;
  @Input() default:string;

  updateUrl() {
    this.src = this.default;
  }
}

myTemplate.html

<ion-img class="max-height-80" src="{{ diaryEntry.thumbnailUrl }}" default="{{ diaryEntry.url }}"></ion-img>
2

If I put a blank constructor in your directive and put a breakpoint on it, it is hit, so I think your problem got lost somehow in the process of simplifying the code for posting.

3

If I remember correctly, ion-img is only available when used with virtual scroll

4

A Plunker says a thousand words :slight_smile:

If you change “ion-img” to “img” in both the Directive class and the html it will function as expected.

With Ionic 2 in beta, I’m not sure if this is my mistake or an Ionic 2 bug.