Ion-img Cannot read property 'isImgsUpdatable' of null

surajrao · January 16, 2017, 9:46am

I have the following code to set image on header:
<ion-header> <ion-navbar> <ion-row> <ion-col width-10> <ion-img src="./assets/img/icon.png"></ion-img> </ion-col> <ion-col> <ion-img style="margin-left: 40px;margin-right: 50px" src="./assets/img/Header.png"></ion-img> </ion-col> </ion-row> </ion-navbar> </ion-header>
I am getting the below errors while doing ionic serve

EXCEPTION: Uncaught (in promise): Error: Error in ./Groups class Groups - inline template:20:17 caused by: Cannot read property ‘isImgsUpdatable’ of null
TypeError: Cannot read property ‘isImgsUpdatable’ of null
at Img.update (http://localhost:8100/build/main.js:72256:39)
at Img.set [as src] (http://localhost:8100/build/main.js:72226:22)
at Wrapper_Img.check_src (/IonicModule/Img/wrapper.ngfactory.js:25:22)
at CompiledTemplate.proxyViewClass.View_Groups0.detectChangesInternal (/AppModule/Groups/component.ngfactory.js:502:17)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:110481:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:110574:44)
at CompiledTemplate.proxyViewClass.View_Groups_Host0.detectChangesInternal (/AppModule/Groups/host.ngfactory.js:29:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:110481:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:110574:44)
at ViewRef_.detectChanges (http://localhost:8100/build/main.js:59629:20)

My ionic info:
Your system information:

Cordova CLI: 6.4.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.8.1
Xcode version: Not installed

NOTE
The code works inside ion-content.
It also works if I use just img instead of ion-img.
Am I missing something in ion-img or is this a bug?

surajrao · January 17, 2017, 5:37am

Anyone has any idea?
So I cannot use ion-img in header?

saimon · January 17, 2017, 9:20am

From your code I can’t find a variable where you are using the property isImgsUpdatable!
This error seems to be coming from your Javascript code, so please post that code as well or check if you are using this property on a variable which is null!

In general, your error does not seem to be related to the header image because you don’t load it dynamically!

surajrao · January 17, 2017, 9:26am

I am not using isImgsUpdatable. ion-img does in the Ionic code.
But for some wierd reason it throws error within the header but works fine in ion-content.
Checked in Ionic github.

github.com

ionic-team/ionic/blob/master/src/components/img/img.ts

import { ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';

import { Img as IImg } from './img-interface';
import { Content } from '../content/content';
import { DomController } from '../../platform/dom-controller';
import { isPresent, isTrueProperty } from '../../util/util';
import { Platform } from '../../platform/platform';


/**
 * @name Img
 * @description
 * Two of the biggest cuprits of scroll jank is starting up a new HTTP
 * request, and rendering images. These two reasons is largely why
 * `ion-img` was created. The standard HTML `img` element is often a large
 * source of these problems, and what makes matters worse is that the app
 * does not have fine-grained control of requests and rendering for each
 * `img` element.
 *
 * The `ion-img` component is similar to the standard `img` element,

This file has been truncated. show original

LAFONT · January 26, 2017, 3:33pm

ion-img should only be used with virtual scroll.

isImgsIpdatable is a method from Content, so only with ion-content

surajrao · January 27, 2017, 4:12am

@LAFONT Thank you. That explains it…

kunalsk · June 20, 2019, 5:45pm

ion-img can only be used within an ion-content.
if you want to use in header then just use simple img tag