I have set up a header within an ion-card, where I am displaying a logo. Initially, everything was working well with inline CSS styling. However, to improve organization, I decided to move the styles to a .scss file. Unfortunately, after doing so, the styles are no longer being applied to the element.
Below is my login.scss code:
.page-login {
ion-grid {
min-height: 100% !important;
}
.login-logo {
background-color: transparent;
display: block;
margin: auto;
height: 100px;
width: 100px;
src: url(assets/logo.png);
}
}
And here is the corresponding HTML code:
<ion-content>
<ion-grid ion-fixed>
<ion-row>
<ion-col col-12>
<ion-list>
<ion-card>
<ion-card-header>
<ion-img class="login-logo" alt="Text"></ion-img>
</ion-card-header>
</ion-card>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
I'm puzzled as to why the image is not appearing as expected.