Ionic page not displaying image even with absolute path

Hello,

I’m encountering a problem in which an img tag is not displaying the image on the device while it’s appearing normally on the browser

The image tag is something like this: . I’ve done some research and saw that in order for the image to display properly the path has to be absolute (https://stackoverflow.com/questions/45267083/ionic-2-image-not-showing-in-android-phone and Image not display in android). However making use of the absolute path didn’t work for me, the image isn’t loading on my Android device or the emulator

Edit: I’m leaving the office now, so it may take awhile to respond but I’ll be sure to check the thread later

Hey @augusto-vieira,

Ir will help if you could paste the code here, just to help reproduce your issue.

I saw that you are using are you aware that this tag is use only in virtualScroll?

That can’t be right. How would that possibly work cross-platform?

3 Likes

I’m sorry for taking so long to reply

The html for the page is as follows:

<ion-content>
      <div class="card-wrap">
        <div class="full-card">
          <form class="ng-pristine ng-invalid ng-touched full-card">
            <div class="login-panel ui-fluid">
              <div>
                <p-messages [(value)]="msgs"></p-messages>
              </div>
              <div class="ui-g"> 
                <div class="ui-g-12">
                  <img src="assets/img/login-logo.png">
                </div>
                <div class="ui-g-12">
                  <span class="md-inputfield">
                    <input type="text" name="login" class="ng-pristine  ui-inputtext 
                    ui-corner-all ui-state-default ui-widget ng-touched" (input)="onLoginChange($event)" [(ngModel)]="user.login">
                    <label class="ui-labelfor">Usuário</label>
                  </span>
                </div>
                <div class="ui-g-12">
                  <span class="md-inputfield">
                    <input id="password" type="password" name="password" class="ng-pristine 
                    ui-inputtext ui-corner-all ui-state-default ui-widget" (input)="onPasswordChange($event)" [(ngModel)]="user.password">
                    <label class="ui-labelfor" for="password">Senha</label>
                  </span>
                </div>
                <div class="ui-g-12">
                  <button ion-button (click)='onLoginClicked()' [disabled]="!isEnabled" label="Entrar" pbutton="" type="submit" ng-reflect-label="Entrar" ng-reflect-icon="ui-icon-person" [class.button-disabled]="isEnabled" disabled="" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"><span class="ui-button-icon-left ui-c fa fa-fw "></span><span class="ui-button-text ui-c">Entrar</span></button>
                </div>
              </div>
            </div>
          </form>
          
        </div>
      </div>
    </ion-content>

The login-logo is not being displayed.

I’ve tried using /android_asset/ as Aaron suggested, but it didn’t seem to work either. I am also going to point out that I’m using primeng as it was requested by our client (I followed the steps here to install it: Ionic 2 Projects: using primeng with ionic 2)

Morning @augusto-vieira

<img src="assets/img/login-logo.png">

If the file is exactly at this path, so check if there is no typo or something like that. We are missing something and need to figure out what is.
Would you mind to paste here your directories hierarchy, a one that could see how files are organize and show where the img file and is content?

try this

> <img src="./assets/img/login-logo.png">

Just an update. I couldn’t post earlier but I’ve managed a work around that resolved the issue for me. In the scss file for my login page I created the following class:

.login-logo{
    content: url('../assets/img/login-logo.png');    
}

And then proceeded to apply this class to my img tag:

<img class="login-logo">

I am not sure if it is the ideal solution, but the logo started being displayed on both the emulator and the Android test device after I took the steps above.

1 Like

Please tell me all those framework classes (such as ng-pristine) are not actually in your template code.