問題闡述:
本人使用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”
問題很小,需要細心觀察,一般圖片無法顯示都是路徑出現問題。希望我的方案能節省您解決問題的時間!