未在设备上显示的图像(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;
}
答
在你的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>
非常感谢你much.problem解决:d –