未在設備上顯示的圖像（Ionic2應用程序）

我正在開發Ionic2中的應用程序。在行的背景中有一張圖片。我還將一張圖片放在行中。圖片在瀏覽器（離子發球）但是，只有背景圖像顯示在真實的移動設備上，原因是什麼。未在設備上顯示的圖像（Ionic2應用程序）

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

來源

2017-05-06 Onur Önder

在你的HTML，你有不正確的相對路徑。

在HTML中每個資產從路徑檢索：'./assets/' 因此這些文件看起來像：

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

來源

2017-05-06 12:27:46

非常感謝你much.problem解決：d –

未在設備上顯示的圖像（Ionic2應用程序）

回答

相關問題