ERROR Error: Uncaught (in promise): TypeError: Can not read property 'src' of null

Question

ERROR Error: Uncaught (in promise): TypeError: Can not read property 'src' of null

Navigation

#1 by (0 votes)

1

I want to get the "src" of an html image but it shows this error. I'm trying to do it as follows

import { NavController, NavParams } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'page-sombraFase1',
  templateUrl: 'sombraFase1.html',
})
export class SombraFase1Page {
  src: any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    var srcuu:any = (<HTMLImageElement>document.getElementById("sol")).src;
  }
  ionViewDidEnter(){
    console.log(this.src);
    
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><ion-header></ion-header><ion-contentclass="bgcSombra" padding>
  <img src="assets/img/cabecalho.png" alt="Cabeçalho" id="cabecalho" (click)="voltarHome()">
  <div class="divDica">
    <img src="assets/img/audio.png" class="dica">
    <img src="assets/img/msgDica.png" class="msgDica">
  </div>
  <div class="imgsGame">
    <img src="assets/img/Sol.png" id="sol">
    <img src="assets/img/lua.png" id="lua">
    <img src="assets/img/Sol-sombra.png" id="solSombra">
    <img src="assets/img/lua-sombra.png" id="luaSombra">
  </div>
</ion-content>

It returns null, how can I resolve this problem?

javascript typescript angular ionic2

asked by anonymous 22.10.2017 / 17:01

1 answer

Get values from an audio file DLL error: api-ms-win-crt-runtime-l1-1-0.dll when running Python

score 0 · Answer 1

Since you are trying to access an element based on your id, you could use the decorator of the Angular ViewChild instead of using pure JavaScript.

Shadow Phase1.html

<ion-content class="bgcSombra" padding>

  ...

  <div class="imgsGame">
    <img #minhaImagem src="assets/img/Sol.png" id="sol">

    ...

  </div>
</ion-content>

shade Phase1.ts

import { Component, ViewChild } from '@angular/core';

...

export class SombraFase1Page {
  @ViewChild('minhaImagem') minhaImagem;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    console.log(this.minhaImagem); //visite seu elemento usando this.minhaImagem
  }

}