Image won't display

Ionic Framework ionic-v3
1

I’m new to Ionic and trying to display a card with image in the background (just as the docs has).
I copied what is written in the docs but the image won’t display in the card.
How can I know what went wrong?
This is my html:

<ion-header>
  <ion-navbar>
    <ion-title>
      test application
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">
  <ion-card>
    <img src="src\img\saopaulo.jpg"/>
    <div class="card-title">Demo Title</div>
  </ion-card>
</ion-content>

I have the img in the project itself for now, and I just copied the path.
this is scss:

.card-background-page {
    ion-card {
    position: relative;
    text-align: center;
    border-radius: 10px;
  }

  .card-title {
    position: relative;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }
}
2

Why have you used backslashes? Try this maybe :

 <img src="src/img/saopaulo.jpg"/>
3

Thanks, I did try but it still won’t show.

4

You’re already in the src folder when you specify the path. Try this :

<img src="img/saopaulo.jpg"/>
5

Thanks, but it still does not work.

6

try this

<img src="assets/img/image_name.jpg">

put your image to folder src/assets/img

if the img folder is not there then create a new one

7

Thanks, works great :smiley: .