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
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?
I’m sorry for taking so long to reply
The html for the page is as follows:
<form class="ng-pristine ng-invalid ng-touched full-card">
<div class="login-panel ui-fluid">
<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">
<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>
<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>
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)
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?
> <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:
And then proceeded to apply this class to my img tag:
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.
Please tell me all those framework classes (such as
ng-pristine) are not actually in your template code.