图像未显示在设备上（Ionic2 应用程序）

Question

我正在开发一个应用程序 Ionic2.There 是在 rows.I 的背景中放一张图片 row.Images 在浏览器上看起来很好（ionic serve）。但是，真正的移动设备上只显示背景图像 device.What 可能是原因。

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 中，你的相对路径不正确。

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>

图像未显示在设备上（Ionic2 应用程序）

Images not displayed on device (Ionic2 Application)

css

image

device

serve

ionic2