ionic3 解決img標籤無法在手機上正常顯示問題

問題闡述:

本人使用img標籤爲頁面引入一個圖片,在瀏覽器能夠正常顯示,但是打包安裝到手機端時確無論如何都顯示不了。


解決方案:

一般這種情況有很多可能性,比如說:

  • 引用路徑不對
  • 圖片沒有加載
  • 圖片損壞
  • ……

下面是我程序中的代碼:

這裏寫圖片描述

乍一看並沒有什麼毛病,在src/pages/home目錄下的home.html文件中若想引用src/assets/imgs下的logo.png文件相對路徑就是”./../assets/imgs/logo.png”。
這樣在瀏覽器中顯示完全沒有問題,爲什麼在手機中就不行呢?
我將生成的apk包改成zip格式,打開後一探究竟,文件結構如下:

這裏寫圖片描述

這時候我意識到ionic中各個page頁下的html在被調用的時候會以模塊的形式插入到index.html文件的ion-app標籤中,因此從上面的文件結構來看,在用到assets/imgs目錄下的logo.png圖片時src的路徑應該是”./assets/imgs/logo.png”

修改之後可以在手機中正常顯示了,另外要提醒一點,如果在scss文件中爲元素添加css樣式時需要引用圖片,同樣需要注意一下路徑問題。所有的scss文件最終會寫入到build文件夾下的main.css文件中(如上圖),所以同樣如果想引用logo.png文件那路徑應該是”./../assets/imgs/logo.png”

問題很小,需要細心觀察,一般圖片無法顯示都是路徑出現問題。希望我的方案能節省您解決問題的時間!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章