未在设备上显示的图像（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应用程序）

回答

相关问题