이미지가 장치에 표시되지 않았습니다. (Ionic2 응용 프로그램)

Question

Ionic2에서 응용 프로그램을 개발 중입니다. 행의 배경에 그림이 있습니다. 행에 그림을 배치합니다 .Images는 브라우저에서 잘 보입니다 (ionic serve) 그러나 실제 휴대 기기에는 배경 이미지 만 표시됩니다. 그 이유는 무엇입니까?

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 당신의 HTML에서

.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의 각 자산 경로에서 검색 :

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