Images not displayed on device

Ionic Framework ionic-v3
1

I am developing an application in Ionic2.There is a picture in the background of the rows.I also place a picture in the row.Images look fine on the browser(ionic serve)

image
forum.PNG301Ă—519 103 KB

However, only background images are displayed on a real mobile device.What would be the reason

image
home.html

<ion-header class="header">
  
  <ion-row>
    <ion-col col-1 class="back">
      <img src="assets/images/noun_884732_cc.png" >
    </ion-col>
    <ion-col col-10 class="ukopuz">
       <img src="assets/images/UKOPUZ.png" >
    </ion-col>
    <ion-col col-1 class="menu">
       <img src="assets/images/menu.png" (click)="menu()">
    </ion-col>
  </ion-row>
</ion-header>

<ion-content class="content">

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-slides class="homeslide" >
           <ion-slide>
             <img src="assets/images/matthew-brodeur-3445.png" style="width:100%;">
           </ion-slide>

           <ion-slide>
              <img src="assets/images/matthew-brodeur-3445.png" style="width:100%;">
           </ion-slide>

           <ion-slide>
              <img src="assets/images/matthew-brodeur-3445.png" style="width:100%;">
           </ion-slide>
        </ion-slides>
      </ion-col>
    </ion-row>
  </ion-grid>
   <ion-grid> 
           <ion-row class="menurow">
               <ion-col class="img2">
                  <img src="../assets/images/noun_683380_cc.png">
                  <h4 class="text text-center">OUR SERVICIES</h4>
               </ion-col>
            </ion-row>
            <ion-row class="menurow">
              <ion-col class="img3">
                  <img src="../assets/images/news.png">
                  <h4 class="text text-center">REFERENCES</h4>
              </ion-col>
            </ion-row>
            <ion-row class="menurow">
              <ion-col class="img4">
                   <img src="../assets/images/photo.png">
                   <h4 class="text text-center">PHOTOS</h4>
              </ion-col>
            </ion-row>
            <ion-row class="menurow">
              <ion-col class="img5">
                  <img src="../assets/images/video.png" >
                  <h4 class="text text-center">VIDEOS</h4>
              </ion-col>
            </ion-row>
            <ion-row class="menurow">
              <ion-col class="img6">
                  <img src="../assets/images/contact.png" >
                  <h4 class="text text-center">CONTACT</h4>
              </ion-col>
            </ion-row>
   
  </ion-grid>

       <ion-row class="footer"> 
         <ion-col col-2></ion-col>
         <ion-col col-2>
          <img src="assets/images/instagram.png" class="footerimg1">
         </ion-col>
         <ion-col col-2>
          <img src="assets/images/facebook.png" class="footerimg2">
         </ion-col>
         <ion-col col-2>
          <img src="assets/images/twitter.png" class="footerimg3">
         </ion-col>
         <ion-col col-2>
          <img src="assets/images/youtube.png" class="footerimg4">
         </ion-col>
         <ion-col col-2></ion-col>
     
    
      </ion-row>

</ion-content>

home.scss

.img2{
     background-size: contain;
     text-align: center;
     background-image: url("../assets/images/photo-1471341971476-ae15ff5dd4ea.png"),
    
}
.img2 img{
    position: relative;
    top:8px;
    width: 14%;
   
}

.img3{
    background-size: contain;
    text-align: center;
    background-image: url("../assets/images/ross-sokolovski-115060.png") ;
}

.img3 img{
    position: relative;
    top:8px;
    width: 14%;
}

.img4{
    background-size: contain;
    text-align: center;
    background-image: url("../assets/images/aron-visser-212265.png") ;
}
.img4 img{
    position: relative;
    top:8px;
    width: 14%;
}

.img5{
    background-size: contain;
    text-align: center;
    background-image: url("../assets/images/jakob-owens-96968.png") ; 
}
.img5 img{
    position: relative;
    top:8px;
    width: 14%;
}

.img6{
    background-size: contain;
    text-align: center;
    background-image: url("../assets/images/d-ng-tr-n-qu-c-104959.png") ;
}
.img6 img{
    position: relative;
    top:8px;
    width: 14%;
}

.menurow{
    padding: 5px;
}
2

Don’t use relative paths for images like that:
<img src="../assets/images/noun_683380_cc.png">
I got the same problems, but after switching back to absolute paths the images appeared again:
<img src="assets/images/noun_683380_cc.png">

3 Likes
3

thank you :slight_smile:

4

I tried to this But Still Not working.:slightly_frowning_face:

5

when i try to press ctrl + click on the img link it tells me Unable to open 'logo.png': File not found (c:\Users\Liz Ndirangu\ALVO\PROJECTS\MOBILE\LEARNIONIC\myApp\src\pages\welcome\...

IDE => Visual studio code

6

Check the path because upper and lower case letters are differentiated in Ionic.
I suffered a lot because I put the path as ./assets/img, when in fact my absolute path was ./assets/Img That is “i” in capital letters.

I hope I have helped you.