# Images not displayed on device

**URL:** <https://forum.ionicframework.com/t/images-not-displayed-on-device/89145>\
**Category:** ionic-v3\
**Created:** [May 6, 2017, 1:07am UTC](https://forum.ionicframework.com/t/images-not-displayed-on-device/89145 "2017-05-06T01:07:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![10ur10der](https://avatars.discourse-cdn.com/v4/letter/1/85e7bf/32.png) [@10ur10der](https://forum.ionicframework.com/u/10ur10der)\
**Post date:** [May 6, 2017, 1:07am UTC](https://forum.ionicframework.com/t/images-not-displayed-on-device/89145/1 "2017-05-06T01:07:35Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/9/2/925a6bc76afa10bedff05937a2724c63f48aa45e.PNG)  
However, only background images are displayed on a real mobile device.What would be the reason

![image](https://global.discourse-cdn.com/ionicframework/original/3X/7/c/7c78a12e6edf57677241241989179c755e4d4ea2.PNG)  
**home.html**

```auto
<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**

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![Nexi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nexi/32/117290_2.png) [@Nexi](https://forum.ionicframework.com/u/Nexi)\
**Post date:** [May 7, 2017, 9:47am UTC](https://forum.ionicframework.com/t/images-not-displayed-on-device/89145/2 "2017-05-07T09:47:46Z")

</div>

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">`

---

<div class="post-metadata">

**Author:** ![10ur10der](https://avatars.discourse-cdn.com/v4/letter/1/85e7bf/32.png) [@10ur10der](https://forum.ionicframework.com/u/10ur10der)\
**Post date:** [May 7, 2017, 9:03pm UTC](https://forum.ionicframework.com/t/images-not-displayed-on-device/89145/3 "2017-05-07T21:03:51Z")

</div>

thank you 🙂

---

<div class="post-metadata">

**Author:** ![anivaishu](https://avatars.discourse-cdn.com/v4/letter/a/d26b3c/32.png) [@anivaishu](https://forum.ionicframework.com/u/anivaishu)\
**Post date:** [August 15, 2017, 6:14am UTC](https://forum.ionicframework.com/t/images-not-displayed-on-device/89145/4 "2017-08-15T06:14:02Z")

</div>

I tried to this But Still Not working.🙁

---

<div class="post-metadata">

**Author:** ![AlvoEd](https://avatars.discourse-cdn.com/v4/letter/a/43a26b/32.png) [@AlvoEd](https://forum.ionicframework.com/u/AlvoEd)\
**Post date:** [August 15, 2017, 12:22pm UTC](https://forum.ionicframework.com/t/images-not-displayed-on-device/89145/5 "2017-08-15T12:22:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marcio\_krul](https://avatars.discourse-cdn.com/v4/letter/m/c37758/32.png) [@marcio\_krul](https://forum.ionicframework.com/u/marcio_krul)\
**Post date:** [August 28, 2017, 9:20pm UTC](https://forum.ionicframework.com/t/images-not-displayed-on-device/89145/6 "2017-08-28T21:20:14Z")

</div>

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.