画像はデバイスに表示されません（Ionic2アプリケーション）

Question

私はIonic2でアプリケーションを開発しています。行の背景に画像があります。また、画像を行に配置しています。ブラウザ（イオンサーブ）しかし、実際の携帯端末には背景画像しか表示されません。理由は何でしょうか。あなたのHTML内

home.html

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

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; 
} 

Answer 1

、あなたは間違った相対パスを持っています。

HTML内の各資産がパスから取得されます。'./assets/' だからあなたのファイルは、次のようになります。D：

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